css3 边框是曲线
导读：CSS3中的边框样式是十分丰富的，除了常规的直线边框外，还提供了可以让边框呈曲线、阴影和图片的样式，其中边框呈曲线式较为引人注目的一种。使用CSS3的border-radius属性可以控制边框的圆角程度，可以使用一个值来设置所有的圆角，也可...
CSS3中的边框样式是十分丰富的，除了常规的直线边框外，还提供了可以让边框呈曲线、阴影和图片的样式，其中边框呈曲线式较为引人注目的一种。使用CSS3的border-radius属性可以控制边框的圆角程度，可以使用一个值来设置所有的圆角，也可以使用4个值分别设置每一个角的圆角程度。例如：
border-radius:30px;
可以使一个元素的四个角都变成圆形。如果只需要控制元素左上角的圆角，可以这样写：border-top-left-radius:10px;
值得注意的是，IE9以下浏览器并不支持这个属性，因此建议在书写时加上兼容代码。border-radius属性除了设置圆角的度数，还可以设置控制多个圆角的样式，让圆角变得更加精致。例如：border-radius:50px 20px 50px 20px / 20px 50px 20px 50px;
这个值将会生成一个左边圆角直径为50px，上面圆角直径为20px，右边圆角直径为50px，下面圆角直径为20px。同时左上及右下角使用了20px的圆角，右上及左下角使用了50px的圆角。边框呈曲线式的用处很多，尤其是在PC侧和移动端页面开发中经常会用到。我们应该多学习CSS3边框的属性，提高开发的效率。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css3 边框是曲线
本文地址： https://pptw.com/jishu/569160.html