欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

div Css3 border-radius 之圆角 DIV圆角 图片圆角

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   


本篇文章给大家带来的内容是关于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代码

 <!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" /> 
<!-- www.divCss5.com --> 
</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/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、案例说明

1)、第一个BOX盒子为了观察到圆角效果所以设置了边框样式,同时设置圆角样式border-radius:5px 5px 0 0;设置左上角和右上角圆角。

2)、第二个BOX3盒子设置背景色,同时设置圆角样式border-radius:5px 0,设置左上角和右下角圆角

3)、第三个对box2盒子里图片img设置圆角样式border-radius:5px,设置四个角均圆角。

以上就是对的全部介绍,如果您想了解更多有关CSS3视频教程,请关注PHP中文网。

本文地址:http://itbyc.com/web/css3/20582.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1