222
 11 12
发新话题
打印

用css写圆角

用css写圆角

http://corner.cha.la/corner/
这里有个生成器。
不过只能生成2楼固定样式,不过自己可以修改。

[ 本帖最后由 ffnn 于 2008-6-26 13:13 编辑 ]

TOP

这是默认的效果。

附件

5535.jpg (6.93 KB)

2008-6-26 12:32

5535.jpg

TOP

代码是
<style type="text/css">
.ffnn-corner{width:660px;font-size:12px;background-color:#eeeeee;padding:12px;margin:12px 0px}
.ffnn-content{height:50px;color:#ffffff;line-height:50px;text-align:center;padding:0px 5px;background-color:#ff6600}
.ffnn{display:block;background-color:#eeeeee}
.ffnn *{display:block;height:1px;overflow:hidden;background-color:#ff6600}
.ffnn1{margin:0px 2px;border-left:1px solid #f3c19f;border-right:1px solid #f3c19f;padding:0px 1px;background-color:#f89450}
.ffnn2{margin:0px 1px;border-left:1px solid #f89450;border-right:1px solid #f89450}
.ffnn3{margin:0px 0px;border-left:1px solid #f3c19f;border-right:1px solid #f3c19f}
.ffnn4{margin:0px 0px;border-left:1px solid #f89450;border-right:1px solid #f89450}
</style>
这个放在<head></head>内

---------------------------------
<div class="ffnn-corner">
<b class="ffnn">
<b class="ffnn1"><b></b></b>
<b class="ffnn2"></b>
<b class="ffnn3"></b>
<b class="ffnn4"></b></b>
<div class="ffnn-content">这里填写内容</div>
<b class="ffnn">
<b class="ffnn4"></b>
<b class="ffnn3"></b>
<b class="ffnn2"></b>
<b class="ffnn1"><b></b></b></b>
</div>
这个放在<body></body>里,或者表格,DIV里。

TOP

如果你觉得背景是多于的,不要它,可以简单修改下。

把padding的值写成0px

<style type="text/css">
.ffnn-corner{width:660px;font-size:12px;background-color:#eeeeee;padding:0px;margin:12px 0px}
....................................
....................................
....................................

附件

637377.jpg (5.67 KB)

2008-6-26 12:39

637377.jpg

TOP

如果你想竖长的,而不是横行的。
<style type="text/css">
.ffnn-corner{width:160px;font-size:12px;background-color:#eeeeee;padding:0px;margin:12px 0px}
.ffnn-content{height:600px;color:#ffffff;line-height:50px;text-align:center;padding:0px 5px;background-color:#ff6600}

在红色的地方修改下就是了。

附件

62626.jpg (6.21 KB)

2008-6-26 12:42

62626.jpg

TOP

如果你要弄竖行的导行条,这里只显示个框架,内部的大家自己添加。
<style type="text/css">
.ffnn-corner{width:160px;font-size:12px;background-color:#eeeeee;padding:0px;margin:0px 0px}
.ffnn-content{color:#ffffff;text-align:left;padding:0px;background-color:#ffffff}
.ffnn{display:block;background-color:#eeeeee}
.ffnn *{display:block;height:1px;overflow:hidden;background-color:#ff6600}
.ffnn1{margin:0px 2px;border-left:1px solid #f3c19f;border-right:1px solid #f3c19f;padding:0px 1px;background-color:#f89450}
.ffnn2{margin:0px 1px;border-left:1px solid #f89450;border-right:1px solid #f89450}
.ffnn3{margin:0px 0px;border-left:1px solid #f3c19f;border-right:1px solid #f3c19f}
.ffnn4{margin:0px 0px;border-left:1px solid #f89450;border-right:1px solid #f89450}
</style>

---------------------------------------------------
<div class="ffnn-corner">
<b class="ffnn">
<b class="ffnn1"><b></b></b>
<b class="ffnn2"></b>
<b class="ffnn3"></b>
<b class="ffnn4"></b></b>
<div class="chala-content">
        <div style="position: relative; width: 100%; height: 10px; z-index: 1; background-color: ff6600" id="layer1">
        </div>
        <div style="position: relative; width: 100%; height: 400px; z-index: 1; bottom: 0px; background-color: #ffffff; border-left:1px solid #f3c19f;border-right:1px solid #f3c19f;" id="layer2">
         </div>
        <div style="position: relative; width: 100%; height: 5px; z-index: 1; background-color: #ff6600" id="layer3">
        </div>

</div>
<b class="ffnn">
<b class="ffnn4"></b>
<b class="ffnn3"></b>
<b class="ffnn2"></b>
<b class="ffnn1"><b></b></b></b>
</div>

红色的是添加的div,可以做表头,表尾,中间的是内容,可以加入表格或DIV做具体的导行。

[ 本帖最后由 ffnn 于 2008-6-26 12:51 编辑 ]

附件

74388.jpg (5.14 KB)

2008-6-26 12:48

74388.jpg

TOP

如果你觉得角度弧度不够,想大点,只有多加了,不过加的不密集的话会出现锯齿,越加越复杂,那还不如就用圆角图片呢。

TOP

不错!谢谢分享!

TOP

很好,,很强大!!
路漫漫其修远兮,吾将上下而求索!

TOP

留名记下,以备不时之需
成功只有努力去奋斗!

TOP

 11 12
发新话题