关于css3:读css揭秘二

1. 文字效果
空心字

<style>
div {
  background: deeppink;
  color: white;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black
}
</style>
<div>
  css
</div>

用屡次含糊的 text-shadow 的成果比下面在放大状况下更好
<style>
div {
  background: deeppink;
  color: white;
  text-shadow: 0px 0px 1px black,0px 0px 1px black;
}
</style>

<div>
css
</div>

<style>
div {
  background: deeppink;
  color: white;
}
div text {
  fill: currentColor;
  stroke: black;
  stroke-width: 1;
}
</style>
<div>
  <svg>
    <text y='1em'>css</text>
  </svg>
</div>

发光字体

留神多重 text 含糊成果的叠加
<style>
div {
  background: black;
  color: #ffc;
  text-shadow: 0 0 .1em currentcolor, 0 0 .3em currentcolor
}
</style>

<div>
  css
</div>

文字含糊

<style>
div {
  background: black;
  color: #ffc;
}
div:hover {//filter: blur(.1em)
  color: transparent
  text-shadow: 0 0 .1em #ffc, 0 0 .1em #ffc; 
}
</style>
<div>
css
</div>

2. 弹窗暗影

<style>
.lay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .5)
}
.content {
  position: absolute;
  z-index: 1
}
</style>

<div class='lay'>
</div>
<div class='content'>
</div>

<style>
div {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: raba(0, 0, 0, .8)
}
</style>
<div />

3. 图片交互

<style>
.outer {
  display: inline-block;
  position: relative;
}
.outer>div {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal
}
img {display: block;}
</style>
<div class='outer'>
  <div>
    <img src='1614955396-ad-3.jpg' style='filter: blur(10px)'/>
  </div>
  <img src='' />
</div>

4. 图片和文字

留神点：min-content 将解析为这个容器外部最大的不可断行元素的宽度（即最宽的单词、图片或具备固定宽度的盒元
素）<style>
div {
  max-width: min-content;
  margin: auto
}
</style>
<div>
  <img src='1614955396-ad-3.jpg' />
  <span>The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer.</span>
</div>

5.css 范畴抉择
li:first-child:nth-last-child(n+2):nth-last-child(-n+6)

6. 居中定宽内容

<style>
div {
  padding: 1em;// 回退
  padding: 1em calc(50% - 450px)
}
</style>

<div>
增加代码增加代码增加代码
</div>

7. 垂直居中

留神点：元素须要定宽
<style>
div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18em;
  height: 6em;
  margin-top: -3em;
  margin-left: -9em;
  //
  left: calc(50% - 3em);
  top: calc(50% - 3em)
  
}
</style>
<div>
  <p>Center me, please!</p>
</div>

<style>
div {
  width: 18em;
  margin: 50vh auto 0;
  transform: translateY(-50%)
}
</style>
<div>
  <p>Center me, please!</p>
</div>

8. 紧贴底部的页脚

<style>
html, body {height: 100%}
body {display: flex;}
.footer {
  height: 50px;
  margin-top: auto
}
</style>
<div class="content">
  content
</div>
<footer class="footer">
  footer
</footer>

9. 打字

<style>
@keyframes blink {
  50% {border-color: currentColor}
}
@keyframes typing{
  from {width: 0}
}
div {
  width: 3em;// 配合中文比拟好用
  width: 3ch;// 配合英文比拟好用
  overflow: hidden;
  white-space: nowrap;
  border-right: 1px solid transparent;
  animation: typing 3s steps(3), blink 1s steps(1)
}
</style>
<div>
我是谁
</div>

10.transition-origin
“transform-origin 只是一个语法糖而已。实际上你总是能够用 translate() 来代替它。”

play.csssecrets.io/circular