纯CSS实现网页中某块内容圆角边框等效果Word文档下载推荐.docx

纯CSS实现网页中某块内容圆角边框等效果Word文档下载推荐.docx

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

}.b1,.b1b{margin:

05px;

background:

#999;

.b2,.b2b{margin:

03px;

border-width:

2px;

.b3,.b3b{margin:

02px;

.b4,.b4b{height:

margin:

01px;

.d1{background:

#F7F8F9;

.k{height:

300px;

/style>

/head>

body>

div>

bclass="

b1"

/b>

b2d1"

b3d1"

b4d1"

<

divclass="

bd1k"

fontstyle="

font-size:

26px;

color:

red;

margin:

0px10px;

"

简洁型css圆角矩形<

/font>

/div>

b4bd1"

b3bd1"

b2bd1"

b1b"

方法2：

div.RoundedCorner{background:

#9BD1FA;

width:

400px;

b.rtop,b.rbottom{display:

#FFF}

b.rtopb,b.rbottomb{display:

height:

1px;

hidden;

background:

#9BD1FA}b.r1{margin:

05px}

b.r2{margin:

03px}

b.r3{margin:

02px}

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

01px;

2px}

RoundedCorner"

rtop"

r1"

r2"

r3"

r4"

br>

无图片实现圆角框<

rbottom"

3D:

CODE:

.raised{background:

transparent;

width:

40%;

.raisedh1,.raisedp{margin:

010px;

.raisedh1{font-size:

2em;

#fff;

.raisedp{padding-bottom:

0.5em;

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

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

}.raised.b2{background:

#ccc;

border-left:

1pxsolid#fff;

1pxsolid#eee;

}.raised.b3{background:

1pxsolid#ddd;

}.raised.b4{background:

1pxsolid#aaa;

}.raised.b4b{background:

}.raised.b3b{background:

}.raised.b2b{background:

}.raised.b1{margin:

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

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

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

.raised.b1b{margin:

.raised.boxcontent{display:

raised"

b2"

b3"

b4"

boxcontent"

h1>

3D圆角矩形<

/h1>

b4b"

b3b"

b2b"

css:

.serif{

transparent;

.serifh1,.serifp{

.serifh1{

color:

.serifp{

padding-bottom:

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

display:

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

.serif.b2,.serif.b3{

#fc0;

.serif.b4{

.serif.b1{

0;

.serif.b2{

.serif.b3{

04px;

.serif.boxcontent{

serif"

反向css圆角矩形<

略带菱形的css圆角:

.curved{

.curvedh1,.curvedp{

.curvedh1{

.curvedp{

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

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

#e0cea3;

.curved.b1{

.curved.b2{

.curved.b3{

.curved.b4{

03px03px;

.curved.boxcontent{

border:

0solid#fff;

curved"

略带菱形的css圆角矩形<

特殊CSS圆角：

CODE：

.pillar{

.pillarh1,.pillarp{

.pillarh1{

.pillarp{

.pillar.b1,.pillar.b2,.pillar.b3,.pillar.b4{

.pillar.b1,.pillar.b2,.pillar.b4{

.pillar.b2,.pillar.b3{

#d66;

.pillar.b4{

4pxsolid#fff;

.pillar.b1{

.pillar.b2{

.pillar.b3{

.pillar.boxcontent{

pillar"

b

class="

特殊css圆角矩形<