我们已经看到了一些已广泛实施的CSS3新功能,例如Rounded Corner, Box Shadow和Text Shadow,仅举几例。 仍然有一些试验性的功能,例如我们将在本文中讨论的内容: Border Corner Shape 。
边界角形状使我们可以进一步操纵元素角。 虽然我们可以使用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;
}
给定上述样式规则的示例,我们将得到如下屏幕截图所示的结果。
![舀](https://i-blog.csdnimg.cn/blog_migrate/1fc1f7ea075094ae554844e142c430cf.png)
让我们再看一个例子。 这次我们将拐角形状指定为bevel ,并将边界半径设置为50%( 右下角除外),如下所示。
.box {
background-color: #3498DB;
border-corner-shape: bevel;
border-radius: 50% 50% 0% 50%;
width: 200px;
height: 200px;
}
上面的样式规则将给我们以下结果。
![斜角](https://i-blog.csdnimg.cn/blog_migrate/39efc014893f854b665c3361a30420a5.png)
这很迷人,不是吗?