书签分享收藏举报版权申诉 / 11

立即下载加入VIP,免费下载

当前位置：首页 > 总结汇报 > 学习总结 > 纯CSS实现网页中某块内容圆角边框等效果.docx

纯CSS实现网页中某块内容圆角边框等效果.docx

文档编号：8958889
上传时间：2023-02-02
格式：DOCX
页数：11
大小：27.51KB

《纯CSS实现网页中某块内容圆角边框等效果.docx》由会员分享，可在线阅读，更多相关《纯CSS实现网页中某块内容圆角边框等效果.docx（11页珍藏版）》请在冰豆网上搜索。

纯CSS实现网页中某块内容圆角边框等效果.docx

纯CSS实现网页中某块内容圆角边框等效果

简洁型圆角矩形

方法1

code1:

.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:

block;overflow:

hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{height:

1px;}

.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:

1pxsolid#999;border-right:

1pxsolid#999;}.b1,.b1b{margin:

05px;background:

#999;}

.b2,.b2b{margin:

03px;border-width:

2px;}

.b3,.b3b{margin:

02px;}

.b4,.b4b{height:

2px;margin:

01px;}

.d1{background:

#F7F8F9;}

.k{height:

300px;}

26px;color:

red;margin:

0px10px;">简洁型css圆角矩形

方法2：

div.RoundedCorner{background:

#9BD1FA;width:

400px;}

b.rtop,b.rbottom{display:

block;background:

#FFF}

b.rtopb,b.rbottomb{display:

block;height:

1px;overflow:

hidden;background:

#9BD1FA}b.r1{margin:

05px}

b.r2{margin:

03px}

b.r3{margin:

02px}

b.rtopb.r4,b.rbottomb.r4{margin:

01px;height:

2px}

无图片实现圆角框

3D:

CODE:

.raised{background:

transparent;width:

40%;}

.raisedh1,.raisedp{margin:

010px;}

.raisedh1{font-size:

2em;color:

#fff;}

.raisedp{padding-bottom:

0.5em;}

.raised.b1,.raised.b2,.raised.b3,.raised.b4,.raised.b1b,.raised.b2b,.raised.b3b,.raised.b4b{display:

block;overflow:

hidden;font-size:

1px;}

.raised.b1,.raised.b2,.raised.b3,.raised.b1b,.raised.b2b,.raised.b3b{height:

1px;}.raised.b2{background:

#ccc;border-left:

1pxsolid#fff;border-right:

1pxsolid#eee;}.raised.b3{background:

#ccc;border-left:

1pxsolid#fff;border-right:

1pxsolid#ddd;}.raised.b4{background:

#ccc;border-left:

1pxsolid#fff;border-right:

1pxsolid#aaa;}.raised.b4b{background:

#ccc;border-left:

1pxsolid#eee;border-right:

1pxsolid#999;}.raised.b3b{background:

#ccc;border-left:

1pxsolid#ddd;border-right:

1pxsolid#999;}.raised.b2b{background:

#ccc;border-left:

1pxsolid#aaa;border-right:

1pxsolid#999;}.raised.b1{margin:

05px;background:

#fff;}

.raised.b2,.raised.b2b{margin:

03px;border-width:

02px;}

.raised.b3,.raised.b3b{margin:

02px;}

.raised.b4,.raised.b4b{height:

2px;margin:

01px;}

.raised.b1b{margin:

05px;background:

#999;}

.raised.boxcontent{display:

block;background:

#ccc;border-left:

1pxsolid#fff;border-right:

1pxsolid#999;}

3D圆角矩形

css:

CODE:

.serif{

background:

transparent;width:

40%;

}

.serifh1,.serifp{

margin:

010px;

}

.serifh1{

font-size:

2em;color:

#fff;

}

.serifp{

padding-bottom:

0.5em;

}

.serif.b1,.serif.b2,.serif.b3,.serif.b4{

display:

block;

overflow:

hidden;

font-size:

1px;

}

.serif.b1,.serif.b2,.serif.b3{

height:

1px;

}

.serif.b2,.serif.b3{

background:

#fc0;

border-left:

1pxsolid#fff;

border-right:

1pxsolid#fff;

}

.serif.b4{

background:

#fc0;

border-left:

1pxsolid#fff;

border-right:

1pxsolid#fff;

}

.serif.b1{

margin:

0;background:

#fff;

}

.serif.b2{

margin:

01px;

border-width:

02px;

}

.serif.b3{

margin:

03px;

}

.serif.b4{

height:

2px;

margin:

04px;

}

.serif.boxcontent{

display:

block;

background:

#fc0;

border-left:

1pxsolid#fff;

border-right:

1pxsolid#fff;

margin:

05px;

}

反向css圆角矩形

略带菱形的css圆角:

CODE:

.curved{

background:

transparent;

width:

40%;

}

.curvedh1,.curvedp{

margin:

010px;

}

.curvedh1{

font-size:

2em;

color:

#fff;

}

.curvedp{

padding-bottom:

0.5em;

}

.curved.b1,.curved.b2,.curved.b3,.curved.b4{

display:

block;

overflow:

hidden;

height:

1px;

font-size:

1px;

}

.curved.b2,.curved.b3,.curved.b4{

background:

#e0cea3;

border-left:

1pxsolid#fff;

border-right:

1pxsolid#fff;

}

.curved.b1{

margin:

04px;

background:

#fff;

}

.curved.b2{

margin:

04px;

height:

2px;

}

.curved.b3{

margin:

03px;

}

.curved.b4{

margin:

0;

height:

1px;

border-width:

03px03px;

}

.curved.boxcontent{

display:

block;

background:

#e0cea3;

border:

0solid#fff;

border-width:

01px;

}

略带菱形的css圆角矩形

关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

经营许可证编号:鄂ICP备2022015515号-1

纯CSS实现网页中某块内容圆角边框等效果.docx

3D圆角矩形

反向css圆角矩形

略带菱形的css圆角矩形

特殊css圆角矩形

热门标签