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屬性特效等你們來實現哦~