代码如下：

 

　　<divstyle="width:100px;height:50px;background-color:red;border-radius:15px;">

 

　　或者

 

　　<inputtype="button"value=""style="border-radius:5px;"/>

 

　　效果如下图：

 

　　1703ef8289a89f1004880088f1b1be3.png

 

　　看了上述代码是不是觉得非常简单呢。其实html设置圆角矩形按钮样式关键之处，就是css中的border-radius

 

　　属性。只要你掌握了这属性的本质用法，那么无论给div还是图片还是边框按钮设置圆角都可以轻松实现。

 

　　重点知识点介绍：border-radius属性是一个最多可指定四个border-*-radius属性的复合属性这个属性允许你为元素添加圆角边框！

 

　　border-radius:1-4length|%/1-4length|%;

 

　　每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

 

　　那么本篇关于css按钮设置圆角样式的介绍，对有需要的朋友有所帮助。







本文转载自中文网