读css揭秘(一)

时间 2021-05-25

标签 css css3 svg wordpress post 字体优化动画 url spa 栏目 CSS 繁體版

原文原文链接

1.当css间存在某种关系时应当用关系去描述，而非相同的值css

1. currentcolor:取当前元素的color值，没有则取父级的color值
2. inherit:继承父级

2.实现透明边框css3

核心问题在于：背景色撑满了整个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.实现多边框svg

注意点：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.背景图片的定位方案wordpress

注意点：该方案对固定宽高的背景比较好用，但对于宽高弹性并非很好定位
<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.边框内圆角post

<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 />

代码优化url

<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.生成一个带图片的边框spa

注意点：两个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
}

1. css 揭秘-读书笔记
2. 《CSS揭秘》读书笔记
3. 《css 揭秘》读书笔记
4. 《CSS揭秘》读后感
5. 《css揭秘》读书笔记
6. CSS 揭秘
7. 《CSS揭秘》笔记（一）
8. 《CSS揭秘》示例代码全揭秘
9. CSS揭秘（引言）
10. css揭秘系列
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• JDK13 GA发布：5大特性解读
• RxJava操作符（一）Creating Observables