带贝塞尔曲线的CSS边框
[英]CSS borders with bezier curves
问题描述
We all know it's possible to have rounded corners in plain CSS using the border-radius property. 
我们都知道，可以使用border-radius属性在纯CSS中border-radius 。 Is it also possible to have arbitrary corner shapes, specifically, using cubic-bezier ? 是否还可以具有任意的拐角形状，特别是使用cubic-bezier ？
1 个解决方案
解决方案1
2 已采纳 2015-02-19 18:21:27
It most definitely is, by using CSS masking. 最肯定的是，通过使用CSS遮罩。 If you only care about the shape (so, not the color/thickness/etc that you get when you use the CSS border property) then setting up a "border shape" is identical to using "a clipping mask", with the kind of shape that is set up by border-radius is simply clipping with a "rectangle with rounded corners" mask. 如果只关心形状（因此，不关心使用CSS border属性时得到的颜色/厚度/等），则设置“边界形状”与使用“剪贴蒙版”相同， border-radius设置的形状只是用“带有圆角的矩形”蒙版进行裁剪。
html5rocks.com has lots of examples of absolutely crazy border shapes done this way. html5rocks.com上有许多通过这种方式制作的绝对疯狂的边框形状示例。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.