div css3 border

2020-03-24 17:35:46

字體：大中小

來源：轉載

供稿：網友

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

一、css3單詞與語法結構 - TOP

1、DIVCSS3圓角單詞：
border-radius

2、語法結構

div{border-radius:5px}

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

div{border-radius:5px0;}

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

div{border-radius:5px5px00;}

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

3、說明：
border-radius:3px 4px 5px 6px
代表設置對象左上角3px圓角、右上角4px圓角、右下角5px圓角、左下角6px圓角。

4、css圓角屬性分析圖

CSS3 border-radius圓角結構分析圖
css3 border-radius圓角分析圖

二、CSS3圓角案例 - TOP

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

1、案例HTML代碼

<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>對象圓角DIVCSS5VIP</title>
<linkhref="images/style.css"rel="stylesheet"type="text/css"/>
<!--www.divcss5.com-->
</head>
<body>
<div>盒子左上角和右上角對象圓角測試</div>
<divclass="box">DIV盒子圓角</div>
<div>盒子對象個角圓角測試</div>
<divclass="box3">DIV盒子圓角</div>
<p>&nbsp;</p>
<div>圖片對象圓角測試</div>
<divclass="box2"><imgsrc="images/divcss5-logo.gif"/></div>
</body>
</html>

2、案例CSS代碼：

.box{border-radius:5px5px00;border:1pxsolid#000;width:300px;height:80px;margin:0auto}
.box2img{border-radius:5px}
.box3{border-radius:5px0;background:#999;width:300px;height:80px;margin:0auto}

3、圓角案例效果截圖

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