纯CSS实现网页中某块内容圆角边框等效果Word文档下载推荐.docx
《纯CSS实现网页中某块内容圆角边框等效果Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《纯CSS实现网页中某块内容圆角边框等效果Word文档下载推荐.docx(11页珍藏版)》请在冰豆网上搜索。
![纯CSS实现网页中某块内容圆角边框等效果Word文档下载推荐.docx](https://file1.bdocx.com/fileroot1/2023-2/1/096dca8f-fd61-4f56-bbb2-aa846a39609a/096dca8f-fd61-4f56-bbb2-aa846a39609a1.gif)
}.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圆角矩形<