首頁 >web前端 >css教學 >CSS裡怎麼使用border-radius

CSS裡怎麼使用border-radius

php中世界最好的语言原創: 2017-11-23 11:30:592420瀏覽

今天要跟大家介紹的是border-radius，如何使用border-radius，以及border-radius的屬性。下面我們來看一個小案例。

DIVCSS3圓角單字：border-radius

語法結構

p{border-radius:5px}

設定DIV物件盒子四個角落5像素圓角效果

p{border-radius:5px 0;}

設定DIV物件盒子左上角和右下角5px圓角，其它兩個角為0不圓角

p{border-radius:5px 5px 0 0;}

設定DIV物件盒子左上角和右上角5px圓角，其它兩個角為0不圓角

說明：

border-radius:3px 4px 5px 6px

代表設定物件左上角3px圓角、右上角4px圓角、右下角5px圓角、左下角6px圓角。

CSS3圓角案例

分別對兩個DIV盒子設定圓角、一個圖片設定圓角實作CSS3圓角。

案例HTML程式碼

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>对象圆角 在线演示 </title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<p>盒子左上角和右上角对象圆角测试</p> 
<p class="box">DIV盒子圆角</p> 
<p>盒子对象个角圆角测试</p> 
<p class="box3">DIV盒子圆角</p> 
<p> </p> 
<p>图片对象圆角测试</p> 
<p class="box2"><img src="images/logo.gif" /></p> 
</body> 
</html>

案例CSS程式碼：

.box {border-radius:5px 5px 0 0;border:1px solid #000;width:300px; height:80px; margin:0 auto} 
.box2 img{border-radius:5px} 
.box3{border-radius:5px 0;  background:#999;width:300px; height:80px; margin:0 auto}

案例說明

1）、第一個BOX盒子為了觀察到圓角效果所以設定了邊框樣式，同時設定圓角樣式border-radius:5px 5px 0 0;設定左上角和右上角圓角。

2）、第二個BOX3盒子設定背景色，同時設定圓角樣式border-radius:5px 0，設定左上角和右下角圓角

3）、第三個對box2盒子裡圖片img設定圓角樣式border-radius:5px，設定四個角均圓角。

關於border-radius的知識就這麼多，有興趣的朋友可以自己動手操作一下，更多精彩請關注php中文網其它相關文章！