关于css3:读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标签进行代码展现是要配合&#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
}

关于css3:读css揭秘一

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于css3:读css揭秘一

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复