border-radius 圆角

发布时间：2023-03-15 11:05:46 所属栏目：教程来源：

导读：border-radius 圆角
如果想要把元素边界变得圆润，不妨试试这个属性。

1. 官方定义
通过 CSS3，您能够创建圆角边框并且不需使用设计软件，比如 PhotoShop。

2. 解释
通过给一个 html 元素标签的样式增加一条

border-radius 圆角
如果想要把元素边界变得圆润，不妨试试这个属性。

1. 官方定义
通过 CSS3，您能够创建圆角边框并且不需使用设计软件，比如 PhotoShop。

2. 解释
通过给一个 html 元素标签的样式增加一条 border-radius 属性，让这个元素的边角由直角边变成圆弧。

3. 语法
它的用法遵循 css 通用的：左上、右上、右下、左下的原则。

border-radius:value;
属性   描述
border-radius   四个边角值
border-top-left-radius   左上角圆弧值
border-top-right-radius   右上角圆弧值
border-bottom-right-radius   右下角圆弧值
border-bottom-left-radius   左下角圆弧值
包含参数

参数名称   参数类型
value   ‘%’ | ‘px’ | ‘rem’
只有一个参数时：
border-radius:value;
value 代表给这个元素 4 个方向增加一个的圆弧值。

只有两个参数时，中间用空格分开：
border-radius:value1 value2;
value1 代表左上、右下，value2 代表右上、左下角圆弧值。

只有三个参数时，中间用空格分开：
border-radius:value1 value2 value3;
value1 代表左上 value2 代表右上左下 value3 代表右下
4. 有四个参数时，中间用空格分开

border-radius:value1 value2 value3 value3;
value1 ~ value4 分别代表左上、右上、右下、左下四个角的圆弧值

4. 兼容性
IE   Edge   Firefox   Chrome   Safari   Opera   ios   android
9   all   all   all   all   all   all   all
5. 示例
给 demo 增加右上和左下的圆角
<div class="demo"></div>
可以这样

.demo{
border-radius: px px;
}
推荐第一种写法，但是也可以这样

.demo{
border-top-right-radius:px;
border-bottom-left-radius:px;

demo 增加右上和左下的圆角效果图
制作一个带有圆角的卡片
<div class="card">
<div class="text">
demo1
</div>
</div>
.card{
background: red;
width: px;
height: px;
line-height: px;
text-align: center;
border-radius: px;
}
.text{
display: inline-block;
width: px;
height: px;
line-height: px;
background: #fff;
border-radius: ;

带有圆角的卡片效果图
给一个 table 增加圆角左上和右上是 8px 右下和左下是直角
<table>
<tr>
<td>姓名</td><td>年龄</td>
</tr>
<tr>
<td>demo</td><td>19</td>
</tr>
</table>
table{
background: red;
border-radius: px px ;
font-size: px;
color: #fff;
border-collapse: collapse;
overflow: hidden;

`table` 增加圆角左上和右上是 8px 右下和左下是直角效果图
6. 经验分享
border-radius：50% 会让一个宽度和高度相等的块级元素变成一个圆。
.demo{
width:px;
height:px;
border-radius：
}
设置 50% 的好处就是不用再去计算他的宽高，例如上面这个例子 border-radius:50px同样可以让这个元素变成一个圆。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!