css特殊边框形状_了解CSS边框角形状

我们已经看到了一些已广泛实施的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;
}

给定上述样式规则的示例，我们将得到如下屏幕截图所示的结果。

让我们再看一个例子。 这次我们将拐角形状指定为bevel ，并将边界半径设置为50％（ 右下角除外），如下所示。

.box {
	background-color: #3498DB;
	border-corner-shape: bevel;
	border-radius: 50% 50% 0% 50%;
	width: 200px;
	height: 200px;
}

上面的样式规则将给我们以下结果。

这很迷人，不是吗？

翻译自: https://www.hongkiat.com/blog/css3-border-shape/