读css揭秘(一)

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++) {
&#9;if($j > 10) {
&#9;&#9;echo 'Hello';
&#9;}
}
</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
}