[分享]css3形状切角教学

CSS3技术可以实现形状切角效果，这在美化网页的布局和元素时非常有用。下面介绍两种实现方法：方法一：使用borderradius属性 .box{ borderradius: 10px; } 该代码给....

CSS3技术可以实现形状切角效果，这在美化网页的布局和元素时非常有用。下面介绍两种实现方法：

方法一：使用border-radius属性

 .box{
        border-radius: 10px;
    } 

该代码给.box类设置了10px的边角半径，使元素各个角变得平滑。

方法二：使用clip-path属性

 .box{
        clip-path: polygon(10% 0%, 100% 0%, 100% 90%, 90% 100%, 0% 100%, 0% 10%);
    } 

该代码使用clip-path属性创建了一个多边形，由六个点构成，分别是左上角(10%, 0%)、右上角(100%, 0%)、右下角(100%, 90%)、右下角(90%, 100%)、左下角(0%, 100%)和最后一个点(0%, 10%)，表示一个带有切角的矩形。

以上两种方法都可以达到形状切角的效果，但是要注意支持性问题，一些较旧的浏览器可能无法正常显示。