电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

CSS里怎么适用border-radius

2020-11-28 19:49:10 出处:[ 菜菜电脑网 ] 人气:次阅读
今天给大家参阅的是border-radius,如何用于border-radius,以及border-radius的属性。下面我们看一个小案例。

DIVCSS3圆角单词:border-radius

语法结构

p{border-radius:5px}

设置DIV对象盒子四个角5像素圆角效果

p{border-radius:5px 0;}

设置DIV对象盒子左上角和右下角5px圆角,其它两个角为0不圆角

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

设置DIV对象盒子左上角和右上角5px圆角,其它两个角为0不圆角

概述:

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

代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。

CSS3圆角案例

分别对两个DIV盒子设置圆角、一个图片设置圆角实证CSS3圆角。

案例HTML代码

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>对象圆角 在线展示出 </title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>盒子左上角和右上角对象圆角测试</p> <p class="box">DIV盒子圆角</p> <p>盒子对象个角圆角测试</p> <p class="box3">DIV盒子圆角</p> <p>&nbsp;</p> <p>图片对象圆角测试</p> <p class="box2"><img src="images/logo.gif" /></p> </body> </html>

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

案例暗示

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

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

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

关于border-radius的经验就这么多,感兴趣的朋友可以自己动手操作者一下,更多精彩恳请注目php中文网其它系统性文章!

具体朗读:

CSS里怎么用作border-radius

html的编辑转换器

HTML里空格字符怎么重定向

以上就是CSS里怎么用到border-radius的详尽内容,更多特地关切php中文网其它特别文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152