CSS | 渐变的妙不可言 linear & radial

“你以为你这么低调我就找不到你了吗？没有用的，像你这样拉风的属性，只要有你在的地方，就好像黑夜中的萤火虫一样，那样的鲜明，那样的出众；你那委婉的形状，奇特的写法，神乎其技的思路，还有那百转千回……都深深地迷住了我。”
——题记，改自《国产凌凌漆》

正文

最近发现css3渐变无敌，边边角角利用linear-gradient或者radial-gradient也可以实现，如下图，包括之前所讲的 CSS3 | 制作文字波浪线效果 一文也有谈到：

Paste_Image.png

1. linear-gradient

语法

引自MDN

<side-or-corner>
描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。关键词的先后顺序无影响，且都是可选的。to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。

<angle>
用角度值指定渐变的方向（或角度）。 See <angle>.

<color-stop>
由一个 <color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<length>）。

比如说linear-gradient( 45deg, blue, red )，效果如下，具体用法可以看下 MDN 或者W3C。

图例

再来看background: linear-gradient(135deg, transparent 50%, red );

图例

如此一来，那实现刚开始的第一张效果图，可有想法？
我们继续看background: linear-gradient(135deg, transparent 15px, red 0)：

图例

而background是允许有多背景的，结合background-size（避免渐变图案覆盖）， background-repeat（避免渐变图案平铺），利用background-position设置图片位置，最终第一张效果图实现代码：

.bevel {
    width: 10rem;
    height: 10rem;
    margin: 30px auto;
    background: #58a;
    background: linear-gradient(135deg, transparent 15px, #6cc 0) top left, linear-gradient(-135deg, transparent 15px, #6cc 0) top right,linear-gradient(-45deg, transparent 15px, #6cc 0) bottom right, linear-gradient(45deg, transparent 15px, #6cc 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

效果图.png

2. radial-gradient

语法

// 定义结束的形状
radial-gradient( circle, … ) /* Synonym of radial-gradient( circle farthest-corner, … ) */
radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, … ) */
radial-gradient( <extent-keyword>, … ) /* It draws a circle */
radial-gradient( circle radius, … ) /* A centered circle of the given length. It can't be a percentage */
radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axes are given, horizontal, then vertical */
// 定义形状的位置
radial-gradient ( … at <position>, … )// Definition of the color stops
radial-gradient ( …, <color-stop>, … )
radial-gradient ( …, <color-stop>, <color-stop> )

了解了radial-gradient的语法后，实质上实现边角的道理跟linear-gradient是一样样的。

具体就不说了，直接看第二张图效果的代码，如下：

.concave {
    width: 10rem;
    height: 10rem;
    margin: 30px auto;
    background: #58a;
    background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, radial-gradient(circle at top right, transparent 15px, #58a 0) top right, radial-gradient(circle at  bottom right, transparent 15px, #58a 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

了解了这个奇特的用法，你是不是可以创造出更多有意思的形状呢~
暂此，敬请交流~

参考文章
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds