你不知道的border-radius
2024-09-06 15:50:33
对于border-radius这个属性,我们知道它可以用来设置边框圆角,利用它我们可以画出很多形状
这就需要了解到border-radius的各式写法:
border-radius的写法:
1、只设置一个值,这是最常见的写法
border-radius:4px;
2、设置两个值,第一个值用来设置左上角和右下角,第二个值用来设置右上角和左下角
.box{
width: 100px;
height: 100px;
margin: 20px;
background-color: #f00;
border-radius: 10px 30px;
}
3、设置3个值,第一个值用来设置左上角,第二个值用来设置右上角和左下角,第三个值用来设置右下角
.box{
width: 100px;
height: 100px;
margin: 20px;
background-color: #f00;
border-radius: 10px 30px 50px;
}
4、设置4个值时,不难猜,依次为左上角、右上角、右下角、左下角(顺时针顺序)
border-radius: 10px 20px 30px 40px;
以上4种是水平半径与垂直半径一样的情况,我们也可以单独设置水平半径与垂直半径:
写法如下:(这里直接以设置4个值为例,我们看到/左边为水平半径,右边为垂直半径)
.box{
width: 100px;
height: 100px;
margin: 20px;
background-color: #f00;
border-radius: 10px 20px 30px 40px/20px 40px 60px 80px;
}
在设置border-radius的时候,我们可以同时调整高宽,就如上面的碗形、圆柱形和椭圆,它们是如何实现的呢?
//碗形
.box{
width: 100px;
height: 30px;
margin: 20px;
background-color: #f00;
border-radius: 0px 0px 100px 100px;
}
//圆柱形
.box{
width: 100px;
height: 100px;
margin: 20px;
background-color: #f00;
border-radius: 100px/40px;
}
//椭圆
.box{
float: left;
width: 100px;
height: 50px;
margin: 20px;
background-color: #f00;
border-radius: 100px/50px;
}
我们也可以单独设置某一个角的圆角属性:按顺时针它们的属性名分别是:
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
比如我想设置左上角的圆角值呢:
border-top-left-radius :5px;
如果它们的水平与垂直半径不同:(这里不需要加/分隔)
border-top-left-radius :5px 10px;
内圆角
当border-width的值小于border-radius时,就会出现内圆角
.box{
float: left;
width: 100px;
height: 100px;
margin: 20px;
border:#edd solid 10px;
border-radius: 20px;
}
最新文章
- 60分钟Python快速学习(给发哥一个交代)
- MVVM与Backbone demo
- env.sh
- Hadoop-2.2.0 + Hbase-0.96.2 + Hive-0.13.1(转)
- Java-Android 之Hello World
- [C#][Database]C#通过ODBC以自定义端口连接数据库
- Laravel后台 + AngularJS前端 的网站构建与维护
- Android一些解决方案内存问题(一)
- Python - 首字母大写(capwords) 和 创建转换表(maketrans) 具体解释
- 理解css伪类和伪元素
- Java I/O基础
- 嵌入式linux------SDL移植(am335x下显示bmp图片)
- 【spark】dataframe常见操作
- poj2182(线段树求序列第k小)
- MIUI(ADUI)关闭广告推送步骤方法
- [No000013A]Windows WMIC命令使用详解(附实例)
- webpack导入css及各项loader
- vue路由3:子路由
- 如何遍历List对象
- centos7 sqoop 1 搭建笔记