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