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对应圆角效果截图