如何使div边角圆滑

答案:2 悬赏:0 手机版

解决时间 2021-01-29 09:00

提问者网友：雾里闻花香
2021-01-28 21:04

如何使div边角圆滑

最佳答案

五星知识达人网友：英雄的欲望
2021-01-28 21:35

*{margin:0;padding:0;font-size:12px;}
.wrapper{width:80%;margin:0 auto;}

.sharp{width:30%;margin:20px auto 0;float:left;margin-right:2%;}
.sharp .content div{padding:10px;text-indent:2em;}
.content{height:200px;}
h3{height:29px;line-height:29px;font-size:12px;text-indent:10px;}
a:link,a:visited{color:#999;font-weight:bold; text-decoration:none;}
a:hover{text-decoration:none; border-bottom:1px orange solid;color:orange;}
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}

.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#96c2f1;}
.color1 .b1,.color1 .b8{background:#96c2f1;}
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#eff7ff;}

纯css圆角框换肤方案一
这是最基本的圆角框，无图片，四个圆角全部采用标签绘制，兼容所有浏览器，无hack，使用时只需添加一个class = " color1 "即可，下面的所有颜色方案你可以灵活自定义。

全部回答

1楼网友：人间朝暮
2021-01-28 21:59

CSS 源代码 (CSS Code)： <style type="text/css"> .chala-corner{width:660px;font-size:12px;background-color:#ffffff;padding:12px;margin:12px 0px} .chala-content{height:50px;line-height:50px;text-align:center;padding:0px 5px;background-color:#ffffff;border-left:1px solid #8B8B8B;border-right:1px solid #8B8B8B} .chala{display:block;background-color:#ffffff} .chala *{display:block;height:1px;overflow:hidden;background-color:#ffffff} .chala1{margin:0px 2px;border-left:1px solid #b3b3b3;border-right:1px solid #b3b3b3;padding:0px 1px;background-color:#8B8B8B} .chala2{margin:0px 1px;border-left:1px solid #8B8B8B;border-right:1px solid #8B8B8B} .chala3{margin:0px 0px;border-left:1px solid #b3b3b3;border-right:1px solid #b3b3b3} .chala4{margin:0px 0px;border-left:1px solid #8B8B8B;border-right:1px solid #8B8B8B} </style> DIV 内容HTML源代码 (DIV/HTML Code)： <div class="chala-corner"> <b class="chala"> <b class="chala1"></b> <b class="chala2"></b> <b class="chala3"></b> <b class="chala4"></b></b> <div class="chala-content">这里填写内容</div> <b class="chala"> <b class="chala4"></b> <b class="chala3"></b> <b class="chala2"></b> <b class="chala1"></b></b> </div>

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息