div css3 border-radius 之圓角 DIV圓角 圖片圓角

這篇文章帶給大家的內容是關於div css3 border-radius 之圓角DIV圓角圖片圓角，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、css3單字與文法結構

1、pCSS3圓角單字：
border-radius

2、文法結構

p{border-radius:5px}

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

p{border-radius:5px 0;}

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

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

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

3、說明：
border-radius:3px 4px 5px 6px
代表設定物件左上角3px圓角、右上角4px圓角、右下角5px圓角、左下角6px圓角。

4、css圓角屬性分析圖

二、CSS3圓角案例 

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

1、案例HTML程式碼

 nbsp;html> 
 
 
<meta> 
<title>对象圆角 在线演示 DIVCSS5 VIP</title> 
<link> 
<!-- www.divcss5.com --> 
 
 
<div>盒子左上角和右上角对象圆角测试</div> 
<div>DIV盒子圆角</div> 
<div>盒子对象个角圆角测试</div> 
<div>DIV盒子圆角</div> 
<p> </p> 
<div>图片对象圆角测试</div> 
<div><img  src="/static/imghwm/default1.png" data-src="images/logo.gif" class="lazy" alt="div css3 border-radius 之圓角 DIV圓角 圖片圓角" ></div> 
 

2、案例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}

3、案例說明

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

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

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

以上就是對的全部介紹，如果您想了解更多有關CSS3視頻教程，請關注PHP中文網。

以上是div css3 border-radius 之圓角 DIV圓角 圖片圓角的詳細內容。更多資訊請關注PHP中文網其他相關文章！