border-radius属性
以下内容摘于百度经验。
border-radius圆⾓边框是CSS3的新属性,以前⽹页设计开发中要实现元素的圆⾓边框,通常是⽤背景图⽚来实现的。现在我们只需要给元素添加border-radius属性即可。
⼀.兼容性
它是CSS3的新属性,兼容IE9+,Firefox 4+、Chrome、Safari 5+ 以及 Opera浏览器,对于⼀些较低版本的浏览器,我们可以添加相应的浏览器前缀来兼容。
div {
width: 500px;
height: 300px;
border: 1px solid black;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}
⼆.语法
语法:border-radius:length/persentage;
js语法:object.style.borderRadius="5px"它的属性参数值表⽰有多种⽅式,下⾯就为⼤家⼀⼀介绍。
最常见的⼀种表现形式是⼀个值。如border-radius:6px;
它表⽰元素四个⽅向的圆⾓⼤⼩都是6px,即每个圆⾓的“⽔平半径”和“垂直半半径”都设置为6px;
1. 四个属性值,分别表⽰左上⾓、右上⾓、右下⾓、左下⾓的圆⾓⼤⼩(顺时针⽅向)
border-radius:10px 20px 30px 40px;
2. 三个属性值,第⼀个值表⽰左上⾓,第⼆个值表⽰右上⾓和左下⾓(对⾓),第三个值表⽰右下⾓。
border-radius:10px 30px 60px;
3. 两个属性值,第⼀个值表⽰左上⾓和右下⾓,第⼆个值表⽰右上⾓和左下⾓。
border-radius:20px 40px;
4. 斜杠⼆组值:第⼀组值表⽰⽔平半径,第⼆组值表⽰垂直半径,每组值也可以同时设置1到4个值,规则与上⾯相同。
border-radius:100px/40px;
border-radius:60px 60px 60px 60px/100px 100px 60px 60px;
CSS样式:
.egg{
width: 120px;
height: 160px;
background: #EC0465;
border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;
}
三.实际应⽤
1. 实⼼圆
border radius什么意思.circle{
width: 120px;
height: 120px;
background: #EC0465;
border-radius: 100%;
}
2. 半圆
.lf-self-circle {
width: 60px;
height: 120px;
background: #EC0465;
border-radius: 60px 0 0 60px;
}
3. 扇形
.quarter-botlf-cir {
width: 60px;
height: 60px;
background: #EC0465;
border-radius: 0 0 0 60px;
}
4. 花瓣
.flower {
width: 120px;
height: 120px;
background: #EC0465;
border-radius: 60px 60px 0 60px;
}
5. 胶囊
.level-capsule {
width: 160px;
height: 100px;
border-radius: 50px;
background: #EC0465;
}
6. 椭圆
.ty{
width: 160px;
height: 100px;
background: #EC0465; border-radius: 80px/50px; }
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论