本文共 751 字,大约阅读时间需要 2 分钟。
我们已经看到了一些已广泛实施的新功能,例如Rounded Corner, 和Text Shadow,仅举几例。 仍然有一些试验性的功能,例如我们将在本文中讨论的内容: 。
边界角形状使我们可以进一步操纵元素角。 虽然我们可以使用border-radius
创建圆角,但是Border Corner Shape允许我们形成斜角,铲形角和矩形凹口角。
我们使用border-corner-shape
定义形状。 在撰写本文时,它接受具有以下值的四个预定义形状: curve
, scoop
, bevel
和notch –还建议我们使用cubic-bezier
curve
来形成自定义形状( )。
值得注意的是, border-corner-shape
仅声明了shape ,而形状的长度是使用border-radius属性指定的。 因此,为了能够看到结果,在形成形状时应同时声明这两个属性。
.box { background-color: #3498DB; border-corner-shape: scoop; border-radius: 30px; width: 200px; height: 200px;}
给定上述样式规则的示例,我们将得到如下屏幕截图所示的结果。
让我们再看一个例子。 这次我们将拐角形状指定为bevel ,并将边界半径设置为50%( 右下角除外),如下所示。
.box { background-color: #3498DB; border-corner-shape: bevel; border-radius: 50% 50% 0% 50%; width: 200px; height: 200px;}
上面的样式规则将给我们以下结果。
这很迷人,不是吗?
翻译自:
转载地址:http://adezd.baihongyu.com/