CSS3 圓角邊框border-radius
border-radius屬性是一個(gè)簡寫屬性，用于設(shè)置四個(gè)border-*-radius屬性，語法如下:
border-radius: 1-4 length|% / 1-4 length|%;
四個(gè)border-*-radius屬性的順序如下:
?border-top-left-radius:左上。
?border-top-right-radius:右上。
?border-bottom-right-radius:右下。
?border-bottom-left-radius:左下。
在圓角邊框?qū)傩猿霈F(xiàn)之前，如果想要得到一個(gè)帶有圓角邊框的按鈕，則需要借助一些繪圖軟件才可以實(shí)現(xiàn)。這樣做的缺點(diǎn)是：一個(gè)頁面中的元素需要美工和前端兩個(gè)人配合才能完成，大大降低了工作效率；圖片要比幾行代碼大許多，這就導(dǎo)致頁面加載速度變慢，用戶體驗(yàn)極其不好。
下面就用CSS3的圓角邊框?qū)傩詠韺懸粋€(gè)讓人驚艷的扁平化按鈕吧！
【例題】使用border-radius屬性
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #ccc;
}
div{
width: 200px;
height: 50px;
margin:20px auto;
font-size: 30px;
line-height: 45px;
text-align: center;
color:#fff;
border:2px solid #fff;
border-radius: 10px;
}
</style>
</head>
<body>
<div>button</div>
</body>
</html>
湘公網(wǎng)安備:43011102000856號(hào) 
點(diǎn)擊加載更多評(píng)論>>