关于css3:读css揭秘一

5次阅读

共计 12150 个字符，预计需要花费 31 分钟才能阅读完成。

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 标签进行代码展现是要配合 &#9; 能力失效
<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
}

正文完