Page 97 - css揭秘

SCSS 来写，代码会是这样的：

@mixin beveled-corners($bg, SCSS
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) {
background: $bg;
background:
linear-gradient(135deg, transparent $tl, $bg 0)
top left,
linear-gradient(225deg, transparent $tr, $bg 0)
top right,
linear-gradient(-45deg, transparent $br, $bg 0)
bottom right,
linear-gradient(45deg, transparent $bl, $bg 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}

然后，在需要的时候，我们就可以直接调用它，并传入 2~5 个参数：
SCSS
@include beveled-corners(#58a, 15px, 5px);

在上面这行代码中，元素的左上角和右下角会得到 15px 的切角效果，
而右上角和左下角会得到 5px 的切角效果。如果我们提供的值少于四个，它
的行为跟 border-radius 属性是类似的。这归功于我们在 SCSS 的 mixin 中
为各个参数指定了默认值，而且这些默认值也可以引用其他参数的值。

试一试 play.csssecrets.io/bevel-corners-gradients

弧形切角

上述渐变技巧还有一个变种，可以用来创建弧形切角（很多人也把这种
效果称为“内凹圆角”，因为它看起来就像是圆角的反向版本）。唯一的区别
在于，我们会用径向渐变来替代上述线性渐变：

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;

66 第 3 章 形状

඀ࠡ JOEC