clip-path

CSS 形状模块标准1（CSS Shapes Module Level 1）这个规范打破了 WEB 中的矩形盒模型的限制，并且将网页设计提升到一个新的高度。 关于 Shapes 规范 shape-outside shape-outside CSS 属性可以来设置行内内容应该包裹的形状，默认形状为： margin-box 。这一属性足以让我们发挥各种想象，从此我们的元素设计将不会仅仅存在于一个矩形内，它可以是任何形状。 shape-outside: none ：没有形状就是默认形状： margin-box shape-outside: margin-box ：定义一个由外边距的外边缘封闭形成的形状。 shape-outside: border-box ：定义一个由边界的外边缘封闭形成的形状。 shape-outside: padding-box ：定义一个由内边距的外边缘封闭形成的形状。 shape-outside: content-box ：定义一个由内容区域的外边缘封闭形成的形状 以上属性定义了整个区域的范围，其实和 box-sizing 比较类似。 shape-outside: circle() ：定义一个圆形函数来绘制包裹形状。 shape-outside: ellipse() ：定义一个椭圆形函数来绘制包裹形状。 shape-outside: inset() ： shape

简介 CSS Variables，一个并不是那么新的东西，但对css来说绝对是一场革命。 之前使用变量的时候，需要借助sass、less等预处理工具来实现，现在我们可以直接使用css来声明变量。 兼容性 老规矩，先来看下兼容性 兼容性 兼容性一片绿，红的那不是还有两个吗？做大事怎么能拘小节呢，让它咕噜（gun）一边去吧。 语法 语法有点难看但很简单， --* 来声明变量名， var(--*) 来使用，也许你要问了，为什么使用 -- 不用 $ 一类的呢，唉，那不是sass、less两个货用了吗 声明和使用必须放在{}代码块里 body{ --bg-color: lightblue; background-color: var(--bg-color); } 效果 代码是不是很简单，可以直接看效果，就不赘述了。 全局变量与变量覆盖 在 :root 代码块里面声明的变量就是全局变量，并且局部变量会覆盖全局变量 :root{ --bg-color: red; } body{ --bg-color: lightblue; background-color: var(--bg-color); } 最后生效的是 --bg-color: lightblue ， bg-color 变量的值也就变成了 lightblue 变量的缺省值 完整的变量使用语法 var( [, ]? ) ，当变量没有定义的时候

CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能： clip-path shape-outside shape 的意思是图形，CSS shapes 也就是 CSS 图形的意思，也就是使用 CSS 生成各种图形（圆形、矩形、椭圆、多边形等几何图形）。 CSS3之前，我们能做的只有矩形，四四方方，条条框框。 CSS3 CSS3出来后，我们有了更广阔的施展空间，通过 border-radius border transform 伪元素配合 gradient 渐变 我们能够作出非常多的几何图形。 除去最常见的矩形，圆形（border-radius），下面稍微列举一些其他几何图形： 三角形 通常会使用透明的border模拟出一个三角形： .traingle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid yellowgreen; } 切角 《CSS Secret》里面的方法，采用多重线性渐变实现切角。 .notching { width: 40px; height: 40px;