| 前端笔记12 | 您所在的位置：网站首页 › 前端部分内边框怎么改 › 前端笔记12 |
|
边框设置圆角
1.快速实现
.box{
/*设置宽度和高度 单位px（像素）*/
width: 100px;
height: 100px;
/*边框设置圆角*/
border: 4px solid red;
/*设置四个角*/
border-radius: 20px;
/*第一个参数设置（上左、下右），第二个参数设置（上右、下右）*/
border-radius: 10px 20px;
/*第一个参数上左，第二个参数设置上右、下左，第三个参数设置下右*/
/*border-radius: 10px 20px 30px;*/
/*四个参数分别代表上左、上右、下右、下左*/
border-radius: 10px 20px 30px 40px;
}
2.单独设置某一个角
.box{
/*设置宽度和高度 单位px（像素）*/
width: 100px;
height: 100px;
/*边框设置圆角*/
border: 4px solid red;
/*设置左上角*/
border-top-left-radius: 20px;
/*设置右上角*/
border-top-right-radius: 20px;
/*设置左下角*/
border-bottom-left-radius: 20px;
/*设置右下角*/
border-bottom-right-radius: 20px;
}
3.设置圆
在style里面的css代码加入下面这句代码就可以实现圆的效果。需要注意的是，必须是一个正方形。 border-radius: 50%; 4.设置椭圆在style里面的css代码加入下面这句代码就可以实现圆的效果。需要注意的是，必须是一个长方形。 border-radius: 50%; |
| CopyRight 2018-2019 实验室设备网 版权所有 |