css3中有一个非常好用的新属性:border-radius用来实现圆角
我们知道在网页中有很多图片样式棱角分明,如果为元素添加圆角属性看起来效果会更舒服
border-radius是一个简写属性,它是由四个属性组成的:
用于设置四个border-*-radius属性:
border-top-left-radius:<length> <length>;//左上角
border-top-right-radius:<length> <length>;//右上角
border-bottom-right-radius:<length> <length>;//右下角
border-bottom-left-radius:<length> <length>;//左下角
第一个<length>参数是圆角水平半径,第二个值是垂直半径,如果第二个值省略,那么就等于第一个值。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
radius,就是半径的意思。用这个属性可以很容易做出圆角效果,当然,也可以做出圆形效果。原理很简单,“正方形的内切圆的半径等于正方形边长的一半”。下面就做一个红色的圆。
还是上面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
是不是很容易就实现了一个图形切割为圆形呢!
百分之百的正方形切割就像上面的方式很容易实现,设置border-radius:50%;即可
接下来再看看怎样讲一个方形图片切割变为圆形~
先来看看实现方式及效果图:
<span style="font-size:14px;"></span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.Avatar{
position:relative;
width:100px;
height:100px;
overflow:hidden;
border-radius:50%;
}
.Avatar img{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="Avatar"><img src="1.jpg" alt=""></div>
</body>
</html>
当然了,原图大小为1300*958;如果单纯的用上面设置border-radius:50%的方式当然是不行的
所以,首先我们渲染一个圆形,必须得以圆形图片为基础
要解决这个问题,我们可以通过在img标签外面套一层div,然后我们通过将超过这个外层div的img标签的内容给裁掉来实现。具体的话可以通过将外层div的overflow属性设置为hidden。
对应于.Avatar样式
接下来就是将img图片等比例缩小100%显示啦~
这种方式并没有裁剪图片主要内容,网上还有另外一种裁剪长方形图片的实现方式,不过分垂直方向与水平方向裁剪,并且会裁剪掉图片部分内容。再次附上链接方便学习,共同交流~
链接:css剪切圆形图片
接下来看看border-radius在不同内核浏览器下的书写格式:
1、Mozilla(Firefox, Flock等浏览器)
-moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角 等价于: -moz-border-radius: //简写2、WebKit (Safari, Chrome等浏览器)
-webkit-border-top-left-radius: //左上角 -webkit-border-top-right-radius: //右上角 -webkit-border-bottom-right-radius: //右下角 -webkit-border-bottom-left-radius: // 左下角 等价于: -webkit-border-radius: //简写3、Opera浏览器:
border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角 等价于: border-radius: //简写4、Trident (IE)
IE<9不支持border-radius;IE9下没有私有格式,都是用border-radius,其写法和Opera是一样的,这里就不在重复。
为了不管是新版还是老版的各种内核浏览器都能支持border-radius属性,那么我们在具体应用中时需要把我们的border-radius格式改成:
-moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
-webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
再次附上一个讲的比较全面的链接:点击打开链接
最后再附上一个利用border-radius属性做的奥运五环~
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The Olympic Flag</title>
<style type="text/css" media="screen">
body {
margin:20px;
background-color:#efefef;
}
ul.flag {
list-style-type:none;
position: relative;
margin: 20px auto;
}
.flag li, .flag li:before, .flag li:after {
-webkit-border-radius: 6em;
-moz-border-radius: 6em;
border-radius: 6em;
position: absolute;
}
.flag li {
width: 12em;
height: 12em;
left: 0;
top: 0;
font-size: 1em;
}
.flag li:after {
display: block;
content: "";
top: -0.1em;
left: -0.1em;
right: -0.1em;
bottom: -0.1em;
border: solid 1.4em black;
}
.flag .blue { z-index: 10; left: 0; top: 0; }
.flag .yellow { z-index: 20; left: 6.8em; top: 5.7em; }
.flag .black { z-index: 21; left: 13.6em; top: 0; }
.flag .green { z-index: 20; left: 20.4em; top: 5.7em; }
.flag .red { z-index: 10; left: 27.2em; top: 0px; }
.flag .blue:after { border-color: blue; }
.flag .yellow:after { border-color: yellow; }
.flag .black:after { border-color: black; }
.flag .green:after { border-color: green; }
.flag .red:after { border-color: red; }
/* 蓝色压住黄色 */
.flag .blue.alt { z-index: 24; }
.flag .blue.alt,
.flag .blue.alt:before,
.flag .blue.alt:after {
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
}
/* 黄色压住黑色 */
.flag .yellow.alt { z-index: 23; }
.flag .yellow.alt,
.flag .yellow.alt:before,
.flag .yellow.alt:after {
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
}
/* 绿色压住黑色 */
.flag .green.alt { z-index: 23; }
.flag .green.alt,
.flag .green.alt:before,
.flag .green.alt:after {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
/* 红色压住绿色 */
.flag .red.alt { z-index: 23; }
.flag .red.alt,
.flag .red.alt:before,
.flag .red.alt:after {
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
}
</style>
</head>
<body>
<ul class="flag">
<li class="blue"></li>
<li class="blue alt"></li>
<li class="yellow"></li>
<li class="yellow alt"></li>
<li class="black"></li>
<li class="green"></li>
<li class="green alt"></li>
<li class="red"></li>
<li class="red alt"></li>
</ul>
</body>
</html></span>
更多的圆角border-radius属性特效等你们来实现哦~