我的博客| Blog
- ·微信小程序错误:VM564:...
- ·mongodb3.2设置密码...
- ·单行滚动代码-单行滚动效果
- ·自己动手制作图形字体,以便于...
- ·MySQL无限级分类PHP按...
- ·Windows下的Apach...
- ·如何将网站上的文章分享到微信...
- ·PHP实现自动获取本月第几个...
联系我| Contact Me
- 电话:18681257080
- QQ:271538869
- 邮编:518020
- 信箱:service@08321.org
- 地址:四川省内江市资中县
诚信稳健,和谐共赢
- 以诚信为立世之本,在稳健的基础上,不断寻求创新与突破。
- 以务实严谨、精微细致的专业精神,为客户做最优质的策划,实现效果最大化。
成功,依稀可见
- 为什么成功依稀可见?
- 依希认为:每一人都有成功的机会,只要我们愿意付出努力,成功就在我们的前方。所以:成功,依稀可见!
我的博客
CSS3创建惊艳多重边框色
来源:本站编辑 发布日期:2010-7-29 已有 人浏览过此信息
是的,我们知道:我们可以为border设置它的width,这个border的宽度可以是5px,可是10px,可以是20px,可以是随意数值。
可是,你想象过可以为每1px的border单独设置颜色么?这是个什么概念?就是说,如果你为一个元素设置了10px的border,那么这10px的边框区域,你可以为它设置10种颜色。每1px是一重(一组)。DEMO:css3 border-colors多组边框色详解
恩,让我们来回味下如何为元素设置边框大小
代码:
.test{
border:6px solid #000;
}
<div class="test">测试border颜色设置</div>
上面的代码表示我们为一个className为test的div元素定义了6px的边框,当然,这是一个矩形,包括有4条边。
于是,这段CSS代码其实可细化为
代码:
.test{
border-width:6px;
border-style:solid;
border-top-color:#000;
border-right-color:#000;
border-bottom-color:#000;
border-left-color:#000;
}
通过细化后的代码,发现我们其实可以给这个矩形的4条边分别设置颜色,至于颜色是要设置成相同还是不同,则要看自己的需求了。
运行细化后的代码(当然你可以更改每条边的颜色),看到的是一个有6px黑色边框的矩形。恩,这就是我们的预期效果。
然而,现在,我们可以将6px的边框拆分成6组,每1px为1组,于是每条边框最多可以设置6中不同的颜色。
怎么做?看看吧
代码:
.test{
border-width:6px;
border-style:solid;
border-top-colors:#000 #fff #999 #aaa #ccc #eee;
border-right-colors:#000 #fff #999 #aaa #ccc #eee;
border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;
border-left-colors:#000 #fff #999 #aaa #ccc #eee;
}
对比代码块二,会发现,前面的都没变,变的只是之前的每条边只能设置单一的颜色,所以用的是border-xxx-color,而现在每条边能设置多组颜色,所以就变成了border-xxx-colors,变成复数了,这个,你懂的,我相信。
运行代码块三后,“怎么和代码块二一样啊?”我知道你会这么说的。
哦,这是我的错,因为大多数浏览器都还不支持多重边框色。以写这篇文章的日期为分界,当下还只有Firefox3.6+支持,所以还需借助Firefox的私有属性来瞧瞧这个效果。
用Firefox3.6+玩玩
代码:
.test{
border-width:6px;
border-style:solid;
-moz-border-top-colors:#000 #fff #999 #aaa #ccc #eee;
-moz-border-right-colors:#000 #fff #999 #aaa #ccc #eee;
-moz-border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;
-moz-border-left-colors:#000 #fff #999 #aaa #ccc #eee;
}
相信,运行代码块四后,你可以放松下了,效果终是出来了。
哦,或许你还应该再看看
代码:
.test{
border-width:10px; border-style:solid;
-moz-border-top-colors:#100 #300 #600 #800 #900 #a00;
-moz-border-right-colors:#100 #300 #600 #800 #900 #a00;
-moz-border-bottom-colors:#100 #300 #600 #800 #900 #a00;
-moz-border-left-colors:#100 #300 #600 #800 #900 #a00;
}
运行代码块五后,我想跟你说的是:如border为10px,却只设置了6组边框色,那么最后一组边框色将渲染剩余的宽度。意思是说最后一组边框色会自动填充没有设置边框色的剩余宽度。
恩,差不多就这样,该结束了。
转载:http://blog.doyoe.com/article.asp?id=228
可是,你想象过可以为每1px的border单独设置颜色么?这是个什么概念?就是说,如果你为一个元素设置了10px的border,那么这10px的边框区域,你可以为它设置10种颜色。每1px是一重(一组)。DEMO:css3 border-colors多组边框色详解
恩,让我们来回味下如何为元素设置边框大小
代码:
.test{
border:6px solid #000;
}
<div class="test">测试border颜色设置</div>
上面的代码表示我们为一个className为test的div元素定义了6px的边框,当然,这是一个矩形,包括有4条边。
于是,这段CSS代码其实可细化为
代码:
.test{
border-width:6px;
border-style:solid;
border-top-color:#000;
border-right-color:#000;
border-bottom-color:#000;
border-left-color:#000;
}
通过细化后的代码,发现我们其实可以给这个矩形的4条边分别设置颜色,至于颜色是要设置成相同还是不同,则要看自己的需求了。
运行细化后的代码(当然你可以更改每条边的颜色),看到的是一个有6px黑色边框的矩形。恩,这就是我们的预期效果。
然而,现在,我们可以将6px的边框拆分成6组,每1px为1组,于是每条边框最多可以设置6中不同的颜色。
怎么做?看看吧
代码:
.test{
border-width:6px;
border-style:solid;
border-top-colors:#000 #fff #999 #aaa #ccc #eee;
border-right-colors:#000 #fff #999 #aaa #ccc #eee;
border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;
border-left-colors:#000 #fff #999 #aaa #ccc #eee;
}
对比代码块二,会发现,前面的都没变,变的只是之前的每条边只能设置单一的颜色,所以用的是border-xxx-color,而现在每条边能设置多组颜色,所以就变成了border-xxx-colors,变成复数了,这个,你懂的,我相信。
运行代码块三后,“怎么和代码块二一样啊?”我知道你会这么说的。
哦,这是我的错,因为大多数浏览器都还不支持多重边框色。以写这篇文章的日期为分界,当下还只有Firefox3.6+支持,所以还需借助Firefox的私有属性来瞧瞧这个效果。
用Firefox3.6+玩玩
代码:
.test{
border-width:6px;
border-style:solid;
-moz-border-top-colors:#000 #fff #999 #aaa #ccc #eee;
-moz-border-right-colors:#000 #fff #999 #aaa #ccc #eee;
-moz-border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;
-moz-border-left-colors:#000 #fff #999 #aaa #ccc #eee;
}
相信,运行代码块四后,你可以放松下了,效果终是出来了。
哦,或许你还应该再看看
代码:
.test{
border-width:10px; border-style:solid;
-moz-border-top-colors:#100 #300 #600 #800 #900 #a00;
-moz-border-right-colors:#100 #300 #600 #800 #900 #a00;
-moz-border-bottom-colors:#100 #300 #600 #800 #900 #a00;
-moz-border-left-colors:#100 #300 #600 #800 #900 #a00;
}
运行代码块五后,我想跟你说的是:如border为10px,却只设置了6组边框色,那么最后一组边框色将渲染剩余的宽度。意思是说最后一组边框色会自动填充没有设置边框色的剩余宽度。
恩,差不多就这样,该结束了。
转载:http://blog.doyoe.com/article.asp?id=228
上一条:推荐网页制作规范
下一条:JS实现图片加载模糊到清晰
