CSS3——-moz-border-*-colors专属Firefox
发布在css研究2014年9月22日view:3671
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

开头

大家好,我叫万万不能没CSS,我想要写关于CSS3系列属性,而且是注重偏重移动端的学习,我是新来的。假如你想自己从每一个值去了解它的渲染机制和写法,假如你是也是爱好前端,并且跟我一样屌丝,跟我一样无聊,那么请加入到更加无聊地自我学习行列。这个过程会非常的辛苦,并且非常的枯燥,假如你还没有做好思想准备,不过小黑会时不时逗比一下你,希望可以从无聊当中找到一丝丝慰藉。

周星驰 演员的自我修养

以下系列学习中,没有特别说明的都是按照如下约定:

1. 桌面端浏览器 基于现代浏览器,小黑现有的桌面端浏览器为 Chrome 33 和Firefox 31和伪现代浏览器(IE9+),对于≤IE8的不做兼容性测试,对于桌面端的Chrome和Firefox是否都是向下兼容的,不得而知,有知道的告知一下,感激不尽
2. 移动端浏览器 手机型号:iPhone 5S 版本:IOS8.0 Safari

大家好,我叫border-colors

你他妈在逗我吧

这个还真心不是逗你玩的,CSS3就是有一个叫做 border-colors 属性。其实之前我也一直以为没有,但是万万没想到,它是存在的。不过它只是对于FireFox感冒,对于其他的浏览器,就只能呵呵了。

简要说明

其实我的全名 -moz-border-*-colors *为上右下左四个边框,并且,虽然我有兄弟,但是我并不能使用你们所看见的简写值 -moz-border-colors //这个是错误的写法哦 ,并且请记住了哦,我的colors可是有s的,不像其他的color不带S的,所以需要我变成四有边框青年的话,必须要把我的全部详细属性值都写全了,//其实很少人知道我要写私有前缀-moz,这个都被你知道了,所以要记住了哦,比如说要写上边框渐变颜色这么写完整:-moz-border-top-colors:#000 #111# #222 #333 ...

语法

-moz-border-*-colors:  [<color>]* <color> | none //* 为top、right、bottom、left

属性值详解

color:个数不限,可以允许有N个值,颜色值可以是RGB或者HSL、rgba、hsla都可以。
比如说#fff #000 #333 #666 #999 。这表示这个从盒子边框第一条1px的线为白色,然后由黑向白的一个渐变。#fff是表示最接近边框的一个为1px的白线,如下
1px白线

例子

border:10px solid #000; padding:1em;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

效果

你他妈在逗我吧

想要看见我真实面貌,移动端的童鞋请拿起你们手机扫这里:

还有一点:
原则上说我是应用全部元素,但是边框样式为 dashed 或者 dotted是不被应用的,还有一种情况就是表单元格合并边框也是不被应用的。也可以轻戳这里: 请用Firefox浏览器来看我吧

浏览器支持:桌面除了firefox支持,其他的浏览器统统不支持,Safari 移动版也不支持。

结语

其实我并非想象中这么weisun,因为我要csser写了很多的代码,这其实对于性能来说会大大的降低哦。所以人家不被广大厂商们认可也是情有可原的,但是现在扁平化的世界里面,用这么老式的渐变来渲染也不见得是好事哦。此外此方法跟 box-shadow 那哥们比简直是弱爆了。

本文地址:http://xiaoho.com/?p=776
原创文章,转载请注明来自:◎小黑路人xiaoho.com

评论
发表评论
4年前

@修远兮 为何你可以笑成这样~~~这到底是为何呢。

4年前

@林小志_linxz 哈哈哈哈哈哈哈哈哈

4年前

一个多边框颜色都可以写这么多文字……赞!

WRITTEN BY
DO1路人乙
个人博客:xiaoho.com
TA的新浪微博
PUBLISHED IN
css研究

很喜欢这个前端论坛~所以在自己博客的每一篇原创文章都会在这边跟大家分享一下,暂定就这么多,纯粹的爱好者。

我的收藏