CSS3 圓角邊框border-radius

提問人：劉團圓發(fā)布時間：2020-11-19

border-radius屬性是一個簡寫屬性，用于設置四個border-*-radius屬性，語法如下:

border-radius: 1-4 length|% / 1-4 length|%;

四個border-*-radius屬性的順序如下:

?border-top-left-radius:左上。

?border-top-right-radius:右上。

?border-bottom-right-radius:右下。

?border-bottom-left-radius:左下。

在圓角邊框?qū)傩猿霈F(xiàn)之前，如果想要得到一個帶有圓角邊框的按鈕，則需要借助一些繪圖軟件才可以實現(xiàn)。這樣做的缺點是：一個頁面中的元素需要美工和前端兩個人配合才能完成，大大降低了工作效率；圖片要比幾行代碼大許多，這就導致頁面加載速度變慢，用戶體驗極其不好。

下面就用CSS3的圓角邊框?qū)傩詠韺懸粋€讓人驚艷的扁平化按鈕吧！

【例題】使用border-radius屬性

代碼如下：

<!DOCTYPE html>

<html>

<head>

<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>

相關視頻回答

回復(0)