1.当css间存在某种关系时该当用关系去形容，而非雷同的值
1. currentcolor:取以后元素的color值，没有则取父级的color值2. inherit:继承父级2.实现通明边框
外围问题在于：背景色撑满了整个div也就是background-clip: border-box，如果单纯的应用border: 1px solid rgba(225,225,225,.5)，会透过border看到背景所以应用background-clip: padding-box<style>div { height: 100px; width: 100px; border: 1px solid rgba(225,225,225,.5) background: red; background-clip: padding-box;}</style><div></div>3.实现多边框
留神点：box-shadow实现实线多边框时比拟好用，box-shadow会跟着元素圆角，但box-shadow并不会占用文档地位，当多个box-shadow属性时，越新设置的层级越高，会笼罩前面的设置的<style>body { position: relative; height: 100vh;}div { height: 100px; width: 100px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: 0; box-shadow: 0 0 0 10px red, 0 0 0 20px green}</style><div></div>留神点：outline实现两层边框和虚线边框比拟好用，outline同样不占用地位，并且不能贴合border-radius(被w3c认为时bug??)<style>div { height: 100px; width: 100px; border: 5px solid green; outline: 5px solid blue;}</style><div></div>4.背景图片的定位计划
留神点：该计划对固定宽高的背景比拟好用，但对于宽高弹性并不是很好定位<style>div { background: url('./OIP.jpg') no-repeat #58a; background-position: 70% 70%(right bottom) ;}</style><div></div><style>div { background: url('./OIP.jpg') no-repeat #58a; background-position: calc(100% - 10px) calc(100% - 10px);}</style><div></div>留神点：这种形式能够指定到任意顶点的间隔，更灵便，但须要留神降级<style>div { background: url('./OIP.jpg') no-repeat right bottom #58a; background-position: right 70px bottom 80px;}</style><div></div>留神点：应用padding+background-origin: padding-box同样能够实现间隔某个顶点的间隔，默认值为padding-box,对background-image失效；background-color的范畴是border-box;<style>div { padding: 10px background: url('./OIP.jpg') no-repeat right bottom #58a; background-origin: padding-box}</style><div></div>5.边框内圆角
<style>.outer { padding: 0.5em; background: red;}.inner { border-radius: 10px; background: green}</style><div class='outer'> <div class='inner'> </div></div>留神点：outline不会追随border-radius，box-shadow会追随，用box-shadow填充outline和border-radius之间的空隙<style>div { height: 100px; width: 100px; background-color: red; outline: 10px solid green; box-shadow: 0 0 0 5px green; border-radius: 5px}</style><div></div>6.条纹背景
留神点：如果某个色标的地位值比整个列表中在它之前的色标的地位值都要小，则该色标的地位值会被设置为它后面所有色标地位值的最大值;整个种反复的条纹是基于background-repeat实现的，而repeating-linear-gradient是本身的铺满<style>div { background-image: linear-gradient(red 30%, green 0, green 50%, yellow 0); background-size: 100% 30%;}</style><div />留神点：应用色彩叠加只须要改变一处色彩<style>div { background-color: red; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.1) 0 15px, transparent, 0 30px)}</style><div />留神：linear-gradient的几种写法
background-image: linear-gradient(red 50%, green 0)background-image: linear-gradient(red 0%, red 25%, green 25%, green50%);background-image: linear-gradient(red 0 25%, green 25% 50%);7.如何实现一个棋盘
<style>div { height: 300px; width: 300px; background-size: 30px 30px; background-color: #eee; background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%, #bbb 25%), linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%, #bbb 25%) background-position: 0 0, 15px 45px, 45px 15px, 0 0;}</style><div />代码优化
<style>div { width: 300px; height: 300px; background: #eee; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.7) 25%, rgba(0, 0, 0, 0.1) 0 75%, rgba(0, 0, 0, 0.7) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.7) 25%, rgba(0, 0, 0, 0.1) 0 75%, rgba(0, 0, 0, 0.7) 0); background-size: 30px 30px; background-position: 0 0, 15px 15px;}</style><div />留神：应用圆锥突变<style>div { height: 300px; width: 300px; background-image: repeating-conic-gradient(#eee 0 25%, red 25% 50%) background-size: 30px 30px;}</style><div />留神点：svg做背景<style>div { height: 300px; width: 300px background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25"><rect x="50" width="50" height="50"/> <rect y="50" width="50" height="50"/> </svg>');}</style>8.生成一个带图片的边框
留神点：两个div叠加<style>.outer { padding: 10px; background-url: (xxx.jpg); background-size: cover;}.inner { background-color: #fff;}</style><div class='outer'> <div class='inner'> </div></div>留神点：为什么不必background-color,而是用liear-gradient?因为background-clip始终会对background-color无效，无奈做到精密管制；background-image层级比background-color高；多个background-image先写的层级高，此例要主语background-image层级，<style>div { hegiht: 300px; width: 300px; border: 5px solid transparent; background: linear-gradient(white, white), url('....jpg'); background-clip: padding-box, border-box; background-origin: border-box}</style><div />9.实现一个信封
<style>div { height: 300px; width: 300px; padding: 1em; border: 1em solid transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0(background-position) / 5em 5em(background-size);}</style><div />10.border-radius
https://zhuanlan.zhihu.com/p/42114065
11.平行四边形
留神点：一正一反skewX<style>.outer { background: red; height: 100px; width: 100px; transform: skewX(45deg)}.inner { transform: skewX(-45deg)}</style><div class='outer'> <div class='inner'> </div></div><style>div { position: relative;}div:after { content:''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: red; z-index: -1; transform: skewX(45deg);}</style><div> 一段位子</div>12.菱形图片
留神应用scale填充空隙<style>div { transform: rotate(45deg)}img { transform: rotate(-45deg) scale(1.4)}</style><div> <img src='' /></div>留神点：clip-path能够对元素进行剪切，并且能应用transition动画<style>img { height: 200px; width: 200px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: clip-path 1s}img:hover { clip-path: polygon(0 0, 100% 0,100% 100%, 0 100%);}</style><img src='' />13.切角成果
css回退机制<style>background: #58a;background:linear-gradient(-45deg, transparent 15px, #58a 0);</style>留神应用no-repeat<style>div { height: 200px; width: 200px; background: linear-gradient(-135deg, transparent 15px, black 0) top left, linear-gradient(135deg, transparent 15px, black 0) top right, linear-gradient(45deg, transparent 15px, black 0,) bottom left, linear-gradient(-45deg, transparent 15px, black 0) bottom right; background-size: 50% 50%; background-repeat: no-repeat}</style><div />留神点： 这里的border-image-slice: 1，指的是svg坐标零碎的<style>div { height: 100px; width: 100px; border: 15px solid transparent; border-image: 1 url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a"> <polygon points="0,1 1,0 2,0 3,1 3,2 2, 3 1,3 0,2"/></svg>')}</style><div /><style>div { height: 100px; width: 100px; clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px); background-color: red}</style><div />实现三角
<style>div { height: 100px; width: 200px; background: linear-gradient(135deg, transparent 50%, black 0) top left, linear-gradient(-135deg, transparent 50%, black 0) top right; background-size: 50% 100%; background-repeat: no-repeat}</style><div />弧形切角
<style>div { height: 200px; width: 200px; background: radial-gradient(circle at top left, transparent 15px, black 0) top left,radial-gradient(circle at top right, transparent 15px, black 0) top right, radial-gradient(circle at bottom left, transparent 15px, black 0) bottom left, radial-gradient(circle at bottom right, transparent 15px, black 0) bottom right; background-size: 50% 50%; background-repeat: no-repeat }</style><div />14.border-image
border-image
15.梯形
留神点：div+伪元素，用伪元素背景展现<style>div { padding: 0.5em; display: inline-block; position: relative;}div:after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; background-color: red; transform: perspective(.5em) rotateX(5deg) scaleY(1.3); transform-origin: bottom}</style><div />16.实现一个饼图
step-end
留神点：单色不是能超过50%；<style>div { height: 100px; width: 100px; background-color: black; background-image: linear-gradient(to right, transparent 50%, green 0); //overflow: hidden}div::after { content: ''; display: block; margin-left: 50%; background-color: inherit; transform-origin: left; border-radius: 0 100% 100% 0/50%; transform: rotate(10deg)}</style><div /><style>div { height: 100px; width: 100px; background: black; background-image: linear-gradient(to right, transparent 50%, green 0); border-radius: 50%;}div::after { content: ''; display: block; margin-left: 50%; height: 100px; background-color: inherit; transform-origin: left; border-radius: 0 100% 100% 0/50%; animation: rotate 50s liear infinite, bg 100s step-end infinite; animation-play-state: paused; animation-delay: inherit; //通过父级设置}@keyframes rotate { to { transform: rotate(.5turn) }}@keyframes bg { 50% { background-color: green }}</style><div style='animation-delay: 60s'/><style>svg { background-color: green; border-radius: 50%}circle { fill: green; stroke: red; stroke-width: 50;//留神是width的中线是circle的边；25*2; stroke-dasharray: 0 2*Math.PI*r//虚线的实线、空隙 animation: rotate 100s linear infinite; animation-play-state: paused}@keyframs rotate { to { stroke-dasharray: 2*Math.PI*r 2*Math.PI*r }}</style><svg height='100' width='100'> <cricle r='25' cx='50' xy='50' style='animation-delay: -60s'/></svg>留神点：cricle并没有动证实cssanimation和svganimation静止成果会互相叠加<style>circle { fill: green; animation: move 2s linear infinite;}@keyframes move { to { transform: translateX(50px); }}</style><svg width='100' height='100'> <cricle r='1' cx='50' cy='50'> <animate attributeName="cx" from="50" to="0" dur="2s" repeatCount="indefinite" /> </cricle></svg<style>div { width: 100px; height: 100px; border-radius: 50%; background-image: conic-gradient(red 45%, transparent 0)}</style><div />svg计划有点：易于怎加第三种色彩，可能打印
15.box-shadow
邻边投影<style>div { height: 100px; width: 100px; box-shadow: 3px 3px 6px -3px black}</style><div /><style>div { height: 100px; width: 100px; box-shadow: 3px 0 6px -3px black, -3px 0 6px -3px black;}</style><div />16.不规则投影
留神点： 任何非通明的局部都会被厚此薄彼地打上投影，还能给暗影打上暗影<style>div { height: 100px; width: 100px; background: linear-gradient(135deg, transparent 15px, black 0) top right, linear-gradient(-135deg, transparent 15px black 0) top left, linear-gradient(45deg, transparent 15px block 0) bottom left, linear-gradient(45deg, transparent 15px, block 0) bottom right; background-repeat: no-repeat; background-size: 50% 50%; filter: drop-shadow(0 0 5px black)}</style><div />17.染色成果
留神点： filter也能过滤<style>img { transition: .5s filter; filter: sepia(1) saturate(4) hue-rotate(295deg);}img:hover { filter: none}</style><div />mix-blend-mode是是包裹元素容器的背景色和元素之间的混合<style>div { display: inline-block; background: hsl(335, 100%, 50%); transition: background .3s;}img { mix-blend-mode: luminosity}a:hover { background: transparent}</style><div> <img src='./1614955396-ad-3.jpg' /></div>留神点：该成果在img元素上有效 只能用于background<style>div { height: 600px; width: 600px; background-color: hsl(335, 100%, 50%); background-blend-mode: luminosity; background-image: url(./1614955396-ad-3.jpg); }</style><div />18.毛玻璃
留神点：要给含糊的伪类增加背景，不然图片会没有含糊成果；留神应用负margin对伪元素进行修边<style>body, div::after { background: url('1614955396-ad-3.jpg') 0 / cover fixed;}div { width: 100px; height: 100px; position: relative; background: hsla(0, 0%, 100%, .3); overflow: hidden;}div::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; filter: blur(20px); margin: -30px;}</style><div>一段文字</div>19.折角
留神点：背景是能够设置大小的<style>div { height: 100px; width: 100px; //linear-gradient(to top right, black 15px, transparent 0) 78px -78px, linear-gradient(to left bottom, transparent 15px, blue 0);不好的做法 遗记背景是能够设置大小的^_^ background: linear-gradient(to right top, black 15px, transparent 0) top right/17px 17px, linear-gradient(to bottom left, transparent 15px, blue 0);' background-repeat: no-repeat}</style><div />其余角度实现
留神点：伪元素的宽高，调换更实在<style>div { height: 100px; width: 100px; background: linear-gradient(-140deg, transparent 15px, blue 0);}div::after { content: ''; position: absolute; top: 0; right: 0; height: 23px; width: 19px; background-image: linear-gradient(to top right, red 50%, transparent 0); transform-origin: left bottom; transform: rotate(-11deg); box-shadow: 0 2px 4px -5px green; }</style><div />20.用款式实现换行符
留神点：Unicode 字符代表换行符的：0x000A。在 CSS 中，这个字符能够写作 "\000A"，或简化为 "\A"<style>.n::after { content: "\A"; white-space: pre;}</style><div> <span> name: </span> <span class='n'> jack </span> <span> age: <span> <span class='n'> 18 </span></div>https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
div~p:div后所有p被选中
div+p:div后紧跟p被选中
21.文本条纹
留神点：background-origin完满的解决了padding的问题；background-size受line-height限度<style>div { padding: .5em; line-height: 1.5; background-image: linear-gradient(to bottom, black 50%, red 0); background-size: auto 1.5*2em; background-origin: content-box;}</style><div> name<br /> name<br /></div>22.缩进
坑点：tab-size用到一般元素上能够实现缩进，然而和pre标签进行代码展现是要配合	能力失效<style>#demo { -moz-tab-size: 8; tab-size: 8;}</style><pre id="demo">for($i=0; $i<10; $i++) {	if($j > 10) {		echo 'Hello';	}}</pre>https://usefulangle.com/post/151/css-tab-size
23.字体
字体相连
字体碎片化
24.自定义下划线
a[href] { text-decoration: none; border-bottom: 1px solid gray; line-height: .9; //文字换行时行高问题}a[href] { box-shadow: 0 -1px gray inset;}a[href] {//实线 background: linear-gradient(gray, gray) no-repeat; background-size: 100% 1px; background-position: 0 1.15em; text-shadow: 0.05em 0 white, -0.05em 0 white }a[href] { background: linear-gradient(90deg, white 50%, transparent 0) repeat-x; background-size: 10px 1px; background-position: 0 1.15em}