border-radius 圆角
如果想要把元素边界变得圆润,不妨试试这个。
通过 CSS3,您能够创建圆角边框并且不需使用设计软件,比如 PhotoShop。
通过给 html 元素的样式一条 border-radius
,让这个元素的边角由直角边变成圆弧。
它的遵循 css 通用的:左上、 右上 、右下 、左下 的原则。
border-radius:value;
包含参数
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
分别代表左上、 右上 、右下 、左下四个角的圆弧值
<div class="demo"></div>
可以这样
.demo{
border-radius: px px;
}
推荐第一种写法,但是也可以这样
.demo{
border-top-right-radius:px;
border-bottom-left-radius:px;
}
图
<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>
<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;
}
.demo{
width:px;
height:px;
border-radius:
}
设置 50% 的好处就是不用再去计算他的宽高,例如上面这个例子 border-radius:50px
同样可以让这个元素变成圆。
2. 如果圆角过大,记得要设定 padding
,这样可以避免里面的超出元素。