CSS border-radius圆角属性
border-radius圆角属性
稍微留意观察一下，不难发现，当前网页当中的大部分组件的设计采用了圆角的设计，比如搜索框，比如当前文章的版块，比如按钮等等。这便是通过CSS中的border-radius属性来设置的。
语法
border-radius设置圆角的属性的用法有多种，如下：
- border-raudius:value；设置四个角，且圆角的弧度都一致；
- border-radius:value1 value2；value1用于设置左上角和右下角，value2用于设置右上角和左下角
- border-radius:value1 value2 value3；value1设置左上角、value2设置右上角和左下角、value3设置右下角
- border-radius:value1 value2 value3 value4；分别设置左上、右上、右下和左下；
border-radius圆角属性实例代码，及在线编辑器
下方实例，将通过border-radius一个属性值的方式设置四个角的圆角属性，其它的，可尝试在线修改及在线运行，：
<div id='d'></div>
<style>
#d{width:50%;height:50%;background-color:skyblue;border-radius:5px;}
</style>