一、border-radius属性简介为元素添加圆角边框，可以对元素的四个角进行圆角设置（属性不具有继承性）二、border-radius定义方法border-radius属性有两种定义方法：border-radius可以一次性对四个角设置相同的值(简写属性)，也可对4个角分别设置圆角样式(单独属设性置)。（一）、简写方式为border-radius设置四个参数，一定要注意顺序关系。（...
一、border-radius属性简介
为元素添加圆角边框，可以对元素的四个角进行圆角设置（属性不具有继承性）
二、border-radius定义方法
border-radius属性有两种定义方法：border-radius可以一次性对四个角设置相同的值(简写属性)，也可对4个角分别设置圆角样式(单独属设性置)。
（一）、简写方式
为border-radius设置四个参数，一定要注意顺序关系。
（1）、为属性设置一个值，四个边框的圆角都会采用相同的值。
/* 四个边框圆角为30px */
border-radius:30px;
（2）、为属性设置两个值，第一个值设置左上角和右下角，第二个值设置右上角和左下角。
/* 左上角和右上角圆角为30px，左下角和右下角圆角为10px */
border-radius:30px 10px;
（3）、为属性设置三个值，第一个值设置给左上角，第二个值设置给右上角和左下角，第三个值设置给右下角。
/* 左上角圆角为30px，右上角和左下角圆角为10px，右下角圆角为50px*/
border-radius:30px 10px 50px;
（4）、为属性设置四个值，第一个值设置给左上角，第二个值设置给右上角，第三个值右下角，第四个值左下角。
/* 左上角圆角为30px，右上角圆角为10px，右下角圆角为50px,左下角圆角为100px*/
border-radius:30px 10px 50px 100px;
（二）、单独属性设置
border-top-left-radius：设置左上角边框的圆角样式；
border-top-right-radius：设置右上角边框的圆角样式；
border-bottom-left-radius：设置左下角边框的圆角样式；
border-bottom-right-radius：设置右下角边框的圆角样式；
注：边框的顺序不能打乱，比如border-top-left-radius就不可以写成border-left-top-radius 属性是固定的。
三、应用
（一）、使用border-radius创建圆形
当元素的高度和宽度相等时，这种取值方法就是圆形。
<!DOCTYPE html>
<html lang="en&#
最低0.47元/天 解锁文章
2087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
