-
需要注意的地方:
- 设置渐变色最好要
正常状态与激活状态, 如hover前后呼应, 否则看起来非常的诡异 - 需要适配不同的环境, 否则同一份代码在不同的浏览器中可能会失效
- webkit: Safari和Chrome
- moz: Firefox
- Mircrosoft: IE, 感觉最恶心的浏览器
- 设置渐变色最好要
-
代码如下
.black { color: #008000; border: solid 1px #333; background: white; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); background: -moz-linear-gradient(top, #666, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',endColorstr='#000000'); } .black:hover { color: #666; background: -webkit-gradient(linear, left top, right bottom, from(#444), to(#000)); background: -moz-linear-gradient(top, #000, #444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000'); } -
参数分析:
-
Safari浏览器:
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));- linear: 颜色渐变的方式, 线性
- left top: 颜色渐变的起始位置
- left bottom: 颜色渐变的终止位置
- from: 颜色渐变的起始颜色
- end: 颜色渐变的终止颜色
-
FireFox浏览器:
-moz-linear-gradient(top, #666, #000);- 与webkit不同的是, 这个方法将渐变方式直接写在了函数名中, linear
- top: 表示起始位置, 终止位置是相对的位置
- 如: top起始, bottom终止
- left起始, right终止
- left top起始, right bottom终止
- 后面两个是颜色的起始和终止
-
IE:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000');- IE浏览器不能通过background属性直接使用渐变色, 而是需要使用它们的DX渲染, 因此函数如上所示
- 本人用的是Mac, 所以没有测试IE浏览器的
-
控件的渐变色
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- -webkit-linear-gradient线形渐变详解 CSS3发布很久了，现在在国外的一些页面上常能看到他的...
