下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

玩转CSS3的多色边框

作者:课课家教育     来源: http://www.kokojia.com点击数:2374发布时间: 2016-09-29 11:35:48

标签: border-colors多色边框渐变效果

Web开发

       为边框设置颜色,相信大家都不陌生,控制该效果的属性叫border-color。

  css3出来了一个叫border-colors的属性,跟border-color相比就多了一个字母,然而这样的影响就大了。很显然前者是后者的复数形式,也就是说,现在我们可以给边框设置多个颜色了。

  border-color可以为不同的边设置不同的颜色。

       写法如下

  border-color:#0c0 #0f0 #000 #999;

  那么问题来了,border-colors能像border-color那样把多条边的颜色写在一起吗?

  答案是否定的,因为合在一起的话,浏览器将无法区分颜色分别归到哪条边上。

       比如

  border-colors:#0c0 #ccc #ff0 #0f0 #000 #999;

  我们区分不了哪一种或者哪几种颜色分别属于哪条边,CSS3没有规定4条边的颜色数量必须相等。这样的话,第一条边可以取:#0c0 #ccc #ff0三种颜色,也可以只取#0c0 #ccc两种颜色。

  解决方法可以是用逗号分隔,不过CSS3没做这样的支持,毕竟这里合着写,可读性太差了。

  所以最后需要分成4个属性来写

  -moz-border-top-colors:red blue white white black;

  -moz-border-right-colors:red blue white white black;

  -moz-border-bottom-colors:red blue white white black;

  -moz-border-left-colors:red blue white white black;

  我们先来编写基础的html代码。为了更方便观察多种颜色,我们让边框粗一点。

       代码如下

玩转CSS3的多色边框_border-colors_多色边框_渐变效果_课课家

  

  运行效果如下图所示

绘制灰色粗边框

  现在我们写上多色边框的属性

  .multi-color{

  /*其它样式代码省略*/

  -moz-border-top-colors:red blue white white black;

  -moz-border-right-colors:red blue white white black;

  -moz-border-bottom-colors:red blue white white black;

  -moz-border-left-colors:red blue white white black;

  }

  这里只写了火狐浏览器的前缀,是不是有点别扭?是的,因为到目前为止,这个属性只有火狐浏览器支持,而且也没被w3c收录。所以只有火狐浏览器才能看到如下图所示的效果。

  绘制多色边框

  由于各颜色之间的对比很大,所以多色的效果很明显。

  其实,我们还可以用相似的颜色实现带渐变效果的边框

  .multi-color{

  /*其它样式代码省略*/

  -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;

  -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;

  -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;

  -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;

  }

  再次运行,效果如下图所示,还是蛮好看的对吧。

加入渐变效果的多色边框

  该属性出来有好几年了,但目前仍然只有火狐浏览器支持它,所以web设计师都不敢把这属性应用在实际项目里面。究其原因,可能是颜色太多容易被不懂配色的人用烂,导致w3c的名声被他们搞臭。这就注定了该属性只能是web开发者无聊的时候打发时间的一个玩具,然而小编还是很喜欢这个属性,所以只能说一句,真的是太可惜了。

赞(3)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程