css圆角设计.docx

资源描述

css圆角设计.docx

《css圆角设计.docx》由会员分享，可在线阅读，更多相关《css圆角设计.docx（56页珍藏版）》请在冰豆网上搜索。

css圆角设计.docx

css圆角设计

兼容各个浏览器的纯CSS圆角代码

无标题文档

.spiffy{

display:

block;

}

.spiffy*{

display:

block;

height:

1px;

overflow:

hidden;

background:

#0a67e6;

}

.spiffy1{

border-right:

1pxsolid#95bdf4;

padding-right:

1px;

margin-right:

3px;

border-left:

1pxsolid#95bdf4;

padding-left:

1px;

margin-left:

3px;

background:

#478dec;

}

.spiffy2{

border-right:

1pxsolid#e6effc;

border-left:

1pxsolid#e6effc;

padding:

0px1px;

background:

#3883ea;

margin:

0px1px;

}

.spiffy3{

border-right:

1pxsolid#3883ea;

border-left:

1pxsolid#3883ea;

margin:

0px1px;

}

.spiffy4{

border-right:

1pxsolid#95bdf4;

border-left:

1pxsolid#95bdf4;

}

.spiffy5{

border-right:

1pxsolid#478dec;

border-left:

1pxsolid#478dec;

}

.spiffy_content{

padding:

0px5px;

background:

#0a67e6;

color:

#fff;

}

--YourContentGoesHere-->

简洁设计网是个好

网站简洁设计网是个好网

站简洁设计

网是个好网站简洁设计网是个

好网站简洁设计网

是个好网站简洁设计网是个好网站简洁target="_blank">target="_blank">设计网是个好target="_blank">target="_blank">网站

无图片圆角效果

css圆角效果，IE6,firefox均显示正常

＜html＞

＜head＞

＜title＞css圆角效果--七度空间网页教学网＜/title＞

＜metahttp-equiv="content-type"content="text/html;charset=gb2312"＞

＜styletype="text/css"＞

div.RoundedCorner{background:

#9BD1FA}

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}

＜/style＞

＜/head＞

＜body＞

＜divclass="RoundedCorner"＞

＜bclass="rtop"＞＜bclass="r1"＞＜/b＞＜bclass="r2"＞＜/b＞＜bclass="r3"＞＜/b＞＜bclass="r4"＞＜/b＞＜/b＞

＜br＞无图片实现圆角框＜br＞＜br＞

＜bclass="rbottom"＞＜bclass="r4"＞＜/b＞＜bclass="r3"＞＜/b＞＜bclass="r2"＞＜/b＞＜bclass="r1"＞＜/b＞＜/b＞

＜/div＞

＜/body＞

＜/html＞

CSS圆角（代码比较精练）

2007-05-2821:

简写CSS圆角

.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#007FBA;border-right:

1pxsolid#007FBA;}

.b1,.b1b{margin:

05px;background:

#007FBA;}

.b2,.b2b{margin:

03px;border-width:

2px;}

.b3,.b3b{margin:

02px;}

.b4,.b4b{height:

2px;margin:

01px;}

.d1{background:

#041D30;}

26px;color:

red;margin:

0px10px;">简写CSS圆角