<返回更多

揭秘CSS实用技巧总结

2021-04-08  今日头条  Echa攻城狮
加入收藏
CSS揭秘实用技巧总结

 

作者：幻灵尔依 (授权原创)

https://juejin.im/post/5e0fef935188253a624a6a72

《css揭秘》中讲了47个css技巧，其中有很多日常编码中并不会用到，本文除了将书中部分实用技巧罗列出来之外，还尝试用帮助读者搞明白background、animation 等常用但是却掌握不牢固的知识点。所以阅读本文不仅可以学习一些实用技巧，也可以巩固自己的 css 基础知识。

实用小技巧

DRY原则

全名Don't Repeat Yourself，该原则适用于所有编程语言而不限于css。

扩大可点击区域

.expand-range {
  position: relative;
}
.expand-range:after {
  content: '';
  position: absolute;
  top: -10px; right: -10px; bottom: -10px; left: -10px;
}

推荐使用scss：

@mixin expand-range($top: -10px, $right: $top, $bottom: $top, $left: $right, $position: relative) {
  position: $position;
  &:after {
    content: '';
    position: absolute;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
  }
}
//使用：.test { @include expand-range($top: -5px, $position: absolute) }

巧用层叠上下文

  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
CSS揭秘实用技巧总结

 

层叠上下文

边框内圆角

CSS揭秘实用技巧总结

 

边框内圆角

clip-path

CSS揭秘实用技巧总结

 

clip-path

自适应的椭圆

    border-radius: 5em 1em; /*相当于border-radius: 5em 1em 5em 1em / 5em 1em 5em 1em;*/
CSS揭秘实用技巧总结

 

自适应的椭圆

自适应宽度

  width: min-content;
CSS揭秘实用技巧总结

 

自适应宽度

投影模拟多重边框

  height: 200px;
  background: cyan;
  box-shadow: 0 0 0 5px #000 inset,
              0 0 0 10px #555 inset,
              0 0 0 15px #999 inset;
CSS揭秘实用技巧总结

 

投影模拟多重边框

单侧投影

  box-shadow: 0 5px 4px -4px black;

第二个参数使阴影整体下移 5px ，第三个参数使阴影四周多了 4px 的高斯模糊（注意由于整体下移了 5px，所以此时上方还是没有阴影露出的），第四个参数又把阴影整体缩小了 4px，，所以左右两边才没有出现模糊半径导致的高斯模糊阴影色，从而实现单侧投影。

CSS揭秘实用技巧总结

 

单侧投影

还可以逗号分隔设置多个阴影色，比如下面的两侧投影效果：地址

  box-shadow: 5px 0 5px -5px black,
             -5px 0 5px -5px black;
CSS揭秘实用技巧总结

 

单侧投影

不规则投影

  filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
CSS揭秘实用技巧总结

 

不规则投影

滤镜的染色和褪色效果

前端开发大都了解糊滤的高斯模镜效果是filter: blur()实现的，但是却很少使用滤镜的其他几个调色效果。filter 的值有blur()、drop-shadow()、url()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()～～可以使用复合形式如：filter: sepia(1) saturate(4)等。下面是filter属性值大集合：地址

CSS揭秘实用技巧总结

 

滤镜的染色和褪色效果

饼图 svg

饼图的 css 实现方案非常奇怪，所以我忽略之。推荐使用 svg 的实现方案，非常简单，先来个基本教学吧～

先画个圆：

<svg width="100" height="100">
  <circle r="25" cx="50" cy="50" />
</svg>

这里 r="25" 是半径25， cx cy 分别表示圆心的 x y 坐标。

circle {
  fill: yellowgreen;
  stroke: #666;
  stroke-width: 50;
}

这里给圆形定义了一个宽度 40 的描边:

CSS揭秘实用技巧总结

 

饼图 svg

再把描边设为线段长度 20 间隔 10 的虚线：

circle {
    ...
    stroke-dasharray: 20 10;
}

当把虚线的间隔设定为大于等于圆周时，虚线的线段长度就是一个扇形区域（当线段长度等于圆周时扇区达到100%）：

CSS揭秘实用技巧总结

 

给 svg 设置圆角和背景色，并旋转 -90deg ，就可以实现一个饼图：地址（使用currentColor关键字和color: inherit 是为了实现DRY原则。）

CSS揭秘实用技巧总结

 

但是这样的饼图其扇区大小是不易计算的，为了方便计算，可以让虚线的线段长度同时也是圆周无限接近100，这样就可以更方便的设置扇区的百分比。圆周是 2πr ，所以 100 = 2πr ，计算得出半径 r 近似值 16。再利用 svg 的 viewBox 属性，实现自适应容器大小的饼图：地址

CSS揭秘实用技巧总结

 

这种方法有个弊端，就是当设置 stroke-dasharray: 100 100 时会有一条缝，这是取近似值无法避免的。

背景background

background 是我们最常用的属性之一，但作为一个老前端，我也只能羞耻的说我目前并没有完全掌握这个属性。

background 是一个简写属性，可以包括多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、background-attachment。接下来我们一个个来看看这些属性的作用：

简写时 background-size 只能紧接着 background-position 出现，以 / 分割，如： "center / 80%"。

半透明边框

  border: 10px solid rgba(255, 255, 255, .5);
  background: white;
  background-clip: padding-box;
CSS揭秘实用技巧总结

 

半透明边框

灵活的背景定位

  height: 200px;
  padding: 10px;
  border: 5px solid cyan;
  background: lightblue;
  background: radial-gradient(#00a4fd, cyan) no-repeat right 100px bottom / 100px 100px;
  background-origin: content-box;
CSS揭秘实用技巧总结

 

背景定位

background-position 设为百分比值较为复杂。百分比值实际上执行了以下的计算公式:

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

由计算公式可知：当值为0%时，实际偏移值为0px，此时图片的左边界（或上边界）和容器的左边界（或上边界）重合；当值为50%时，实际偏移值为容器减图片剩余空间的一半，图片左右边界（或上下边界）距离容器左右边界（或上下边界）相等，此时图片的中点和容器的中点重合。当值100%时，实际偏移值为容器减图片的剩余空间，所以此时图片的右边界（或下边界）和容器的右边界（或下边界）重合。二者之差为负值时同样有效。地址

CSS揭秘实用技巧总结

 

背景定位

条纹背景

background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;
CSS揭秘实用技巧总结

 

条纹背景

也可以设置为垂直条纹背景：

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 100% 30px;

还可以设置为斜向条纹：

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;
CSS揭秘实用技巧总结

 

垂直条纹背景

斜向条纹需要设置四条条纹才能在平铺到时候做到无缝拼接。

更好的斜向条纹：(这里必须设置起始值#fb3 0)

background: repeating-linear-gradient(60deg, #fb3 0, #fb3 15px, #58a 0, #58a 30px);
CSS揭秘实用技巧总结

 

更好的斜向条纹

网格

background: #58a;
background-image: linear-gradient(white 1px, transparent 0),
                  linear-gradient(to right, white 1px, transparent 0);
background-size: 30px 30px;
CSS揭秘实用技巧总结

 

网格

更好的网格：

background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
                  linear-gradient(to right, white 2px, transparent 0),
                  linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 0),
                  linear-gradient(to right, rgba(255, 255, 255, .5) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
CSS揭秘实用技巧总结

 

更好的网格

棋盘

  background: #eee;
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
    linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
CSS揭秘实用技巧总结

 

棋盘

折角

CSS揭秘实用技巧总结

 

折角

到这里 background 属性基本讲完了，光看无用，多动手实践吧。

波点

  background:
    radial-gradient(tan 30%, transparent 0),
    radial-gradient(tan 30%, transparent 0);
  background-color: #666;
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
CSS揭秘实用技巧总结

 

波点

切角

  background:
    radial-gradient(circle at top left, transparent 15px, blue 0) top left,
    radial-gradient(circle at top right, transparent 15px, cyan 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, cyan 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, cyan 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
CSS揭秘实用技巧总结

 

切角

饼图

  background: conic-gradient(lightblue 30%, yellowgreen 0, yellowgreen 50%, cyan 0);
CSS揭秘实用技巧总结

 

饼图

动画animation

animation 属性是 animation-name、animation-duration、 animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state属性的一个简写属性形式。

回弹效果

如何给动画加上回弹效果呢？这里介绍一种最便利的方法：

CSS揭秘实用技巧总结

 

回弹效果

上图图横轴为时间，纵轴为动画进度。图中贝塞尔曲线有两个控制手柄，x1, y1 控制第一个锚点，x2, y2控制第二个锚点。其中 x1 、x2 不能大于/小于 1，但是y1, y2 可以。当 y2 大于 1 时，就会产生提前到达终点，然后超过终点，然后再返回终点的效果，像回弹一样。地址

  animation: bounce 3s both cubic-bezier(.7, .1, .3, 2);

transition 属性是 transition-property、transition-duration、
transition-timing-function、transition-delay的一个简写属性。使用 transition 同样可以实现回弹效果：地址

p {
  transform-origin: 1.4em -.4em;
  transition: transform .5s cubic-bezier(.25, .1, .3, 1.5);
}

input:not(:focus) + p {
  transform: scale(0);
  transition: transform 300ms; /*此处是为了缩小时重置transition-timing-function，不触发回弹*/
}
CSS揭秘实用技巧总结

 

会动的背景

div {
  width: 150px; height: 150px;
  background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
  background-size: auto 100%; 
  animation: panoramic 10s linear infinite alternate;
}
div:hover {
  animation-play-state: paused;
}

@keyframes panoramic {
  to { background-position: 100% 0; }
}

环形路径移动的动画

@keyframes spin {
  to { transform: rotate(1turn); }
}
.avatar {
  animation: spin 3s linear 2s infinite;
  transform-origin: 110px 110px;
}
.avatar > img {
  animation: inherit;
  animation-direction: reverse;
}
CSS揭秘实用技巧总结

 

环形路径移动的动画

声明：本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系，我们将立即删除或处理。
▍相关推荐
更多资讯 >>>
Copyright @ 简易百科 V 2.0 京ICP备14042104号