代理加盟 2020全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 站長學院 > 建站教程 >

CSS3 border-radius 圓角及圖片圓角

來源:本站原創 發布時間:2020-01-15 15:21:52熱度:我要評論(0

織夢模板免費下載,無需注冊無需充值

CSS3之border-radius圓角 DIV盒子圓角 圖片圓角,CSS3樣式實現盒子對象圓角、圖片圓角效果。div css3 border-radius圓角樣式教程篇。

一、CSS3之border-radius圓角

1、DIVCSS3圓角單詞:

border-radius

2、語法結構

div{border-radius:5px} 

設置DIV對象盒子四個角5像素圓角效果

div{border-radius:5px 0;} 

設置DIV對象盒子左上角和右下角5px圓角,其它兩個角為0不圓角

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

設置DIV對象盒子左上角和右上角5px圓角,其它兩個角為0不圓角

 

3、說明:

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

代表設置對象左上角3px圓角、右上角4px圓角、右下角5px圓角、左下角6px圓角。

 

4、css圓角屬性分析圖

CSS3 border-radius圓角結構分析圖

CSS3 border-radius圓角結構分析圖

 

二、CSS3圓角案例  

DIVCSS5分別對兩個DIV盒子設置圓角、一個圖片設置圓角實踐CSS3圓角。

 

1、案例HTML代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>對象圓角 在線演示 DIVCSS5 VIP</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div>盒子左上角和右上角對象圓角測試</div> 
<div class="box">DIV盒子圓角</div> 
<div>盒子對象個角圓角測試</div> 
<div class="box3">DIV盒子圓角</div> 
<p>&nbsp;</p> 
<div>圖片對象圓角測試</div> 
<div class="box2"><img src="images/divcss5-logo.gif" /></div> 
</body> 
</html> 

 

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、圓角案例效果截圖

div+css3布局border-radius對應圓角效果截圖

 

4、案例說明

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

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

3)、第三個對box2盒子里圖片img設置圓角樣式border-radius:5px,設置四個角均圓角。

轉載請注明來源網址:http://www.xejrrv.tw/news/2221.html

    發表評論

    評論列表(條)

      深圳风采手机投注