不用切图的页面圆角

dtedte 楼主

从网上找到的效果，自己总结了一下，和大家分享，也许不少高手都会了，但是很适合我这样的新手，第一次在标准化版发贴，希望大家捧场


首先看样式表文件：
.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}

接着看页面代码：
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
当然你也可以用其他的标签<div>或者<span><a>之类，应该也是可以的

[ 本帖最后由 jxdawei 于 2007-12-19 00:39 编辑 ]

flyonair

不错。。早就想有这样的效果。谢楼主了。

竹影

怎样画两边的坚线?

gartional

原帖由 竹影 于 2006-12-1 08:52 发表
怎样画两边的坚线?

把最后一个div设置成margin:0然后给个高度不就好了么 · ·

Qlin

果然只有想不到没有做不到.....

xxcn2006

好东东~学了~

xiangyuanjian

真学习了.不错,顶!!!

xiangyuanjian

在里面加表格好像会出现竖线无法连接弧线的问题..请指教..

myy02

聪明人总是那么多

mazrmc

好效果。先收藏了

dtedte 楼主

尽量不要用table吧
table的boder之类的属性都设成0还不行吗？实在不行只能使用margin=负值的技巧了 哈哈

kalakala

不错不错...正好用到

[ 本帖最后由 jxdawei 于 2007-12-19 00:39 编辑 ]

ybkim33

终于找到了！

phantom

好方法，浪费N多无意义标签实现一个效果。

jiaxiangbj

楼主好棒,有了这个方法,可以省不是时间啊

btwlzyq

我以前做网站的时候，角上都用图片画的，这样很麻烦，而且也不好看。
不过，你的方法可以试试看呢。

后面带有广告地址，去除~~~~~by phantom

[ 本帖最后由 phantom 于 2007-12-18 23:06 编辑 ]

soncy

会增加很多无意义的空标签。。。

btwlzyq

广告清除~~ by phantom

[ 本帖最后由 phantom 于 2007-12-18 23:09 编辑 ]

kan831019

哈~~~感觉用了好多空标签哦~

piscdong

最讨厌圆角，真的那么好看？

niugap

方法挺好,值得赞扬
不过用那么多个DIV 来实现一个圆角效果,实在是不值,为了追求效果,往往忽略了运用DIV的真正含义.即便你实现了,而里面的东西从网站优化的角度来讲就没意义了

Chikoo

我还是觉得用图片好一点,方便以后修改

qiestef

技术上支持  但实用上还是图片的好  方便  宽度自动适应

firepage

嘿嘿，发现了16楼和18楼的广告了。

zhaoliancheng

不错，刚开始还没反映过来。

jsuper

这个特效更适合发到前台版块，不适合标准化专栏。

lucknox

终于理解了,我看了很多CSS标准代码,圆角都是用的图片代替的

zehee

去年的老帖………………………………

pdf66

很好!早上试了下!很强啊!

takuma888

不错,好用
多几个标签我觉得很值得.

另外精简了一下css:

<style type="text/css"> <!-- .r {background:#ff0;border-right:1px solid #000;border-left:1px solid #000;height:1px;font-size:1px;overflow:hidden;display:block;} .a1 {margin:0 5px; background:#000;} .a2 {margin:0 3px; border-right-width:2px; border-left-width:2px;} .a3 {margin:0 2px;} .a4 {margin:0 1px; height:2px;} .a5 {height:auto;font-size:medium;} --> </style> <b class="r a1"></b><b class="r a2"></b><b class="r a3"></b><b class="r a4"></b> <div class="r a5">test</div> <b class="r a4"></b><b class="r a3"></b><b class="r a2"></b><b class="r a1"></b>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

本想只需要改 .r 控制边框和背景颜色,
但是a1的background不知如何处理,试过在.r 加上border-top,IE正常FF却不对.