江苏龙网

  1. 主页 > 生活百科 > >

揭秘CSS实用技巧总结

css


揭秘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) }巧用层叠上下文
  • 关键实现： 伪元素 层叠上下文
  • 具体分析： 利用层叠上下文和 z-index: -1 特性实现伪元素覆盖背景同时又不会遮挡文字（具体实现原理参考这里 ） 。这是一个非常常用又好用的技巧，善加利用可以达到很多意想不到的效果 。地址
  position: absolute;  top: 0; right: 0; bottom: 0; left: 0;  z-index: -1;
揭秘CSS实用技巧总结

文章插图
 
层叠上下文
边框内圆角
  • 关键实现：伪元素 层叠上下文
  • 具体分析：利用伪元素实现圆角矩形并叠加在父元素的背景之上文字之下：地址

揭秘CSS实用技巧总结

文章插图
 
边框内圆角
clip-path
  • 关键实现： clip-path
  • 具体分析：css3 新属性 clip-path 可以实现区域裁剪，现在浏览器支持较好的有三个函数：clip-path: circle(50px at 50px 50px) 以 50px 50px 的地方为圆心裁剪一个半径 50px 的圆；clip-path: ellipse(30px 40px at 50px 50px) 以 50px 50px 的地方为圆心裁剪一个横向半径 30px，纵向半径 40px 的椭圆；clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) 按照多个坐标剪裁一个多边形，此处是菱形 。有了 clip-path，就可以轻易的实现任意多边形了：地址

揭秘CSS实用技巧总结

文章插图
 
clip-path
自适应的椭圆
  • 关键实现：border-radius
  • 具体分析：border-radius 竟然可以设置 8 个角的半径～ 其中水平方向（对角线上下有弧度的地方）和垂直方向（对角线左右有弧度的地方）各四个，可以用 / 分割 。如果水平或垂直方向指定的值少于四个，则会按照和 margin、padding 一样的规则重复 。如果只指定来水平方向的，那么垂直方向的跟水平方向的一样 。
    border-radius: 5em 1em; /*相当于border-radius: 5em 1em 5em 1em / 5em 1em 5em 1em;*/
揭秘CSS实用技巧总结

文章插图
 
自适应的椭圆
自适应宽度
  • 关键实现：min-content关键字
  • 具体分析：如何实现一个元素的宽度根据后代元素的最大固定元素宽度自适应呢？绞尽脑汁，也只能利用 display: inline-block 的包裹特性实现一个不完全的版本：地址 这种方法的缺陷是文本脱离了文档流，高度未计入包含块 。但是如果利用 min-content 关键字，可以一行代码实现且无副作用：地址
  width: min-content;
揭秘CSS实用技巧总结

文章插图
 
自适应宽度
投影模拟多重边框
  • 关键实现：box-shadow的inset
  • 具体分析：使用box-shadow可以模拟实现多重边框，但是由于阴影不占空间，所以无法触发点击事件，鼠标hover边框时无法出现小手，所以需要配合inset关键字使用：地址
  height: 200px;  background: cyan;  box-shadow: 0 0 0 5px #000 inset,              0 0 0 10px #555 inset,              0 0 0 15px #999 inset;


推荐阅读


上一篇：聊聊笔记本行业中的“认证标准”

下一篇：Win10藏着如此多秘密！Win10这些模式你知多少