61,123
社区成员
发帖
与我相关
我的任务
分享css3 线性渐变
css3 怎么调出一条两头颜色浅，中间颜色深的线。例如，我想一<hr>的样式是中间黑色，两边渐渐趋向白色(效果看起来像是中间厚，两边薄)。怎么实现呢?
...全文
请发表友善的回复…
发表回复
TianYa 2011-08-17
- 打赏
- 举报
谢谢各位了
c2u 2011-08-16
- 打赏
- 举报
//渐变背景颜色，IE10+，FF,cHROME, Opera支持。
.linear-gradient {
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image: -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image: -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image: linear-gradient(top, #3c3c3c, #111);
}
.linear-gradient {
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image: -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image: -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image: linear-gradient(top, #3c3c3c, #111);
}
mokson 2011-08-16
- 打赏
- 举报
用图片代替是硬道理。
我的菜你在那里 2011-08-15
- 打赏
- 举报
用图片把
我的菜你在那里 2011-08-15
- 打赏
- 举报
学习了
去圣西罗-为尤文喝彩 2011-08-15
- 打赏
- 举报
这个应该是画，不是写。
如果硬要代码的话，可以用CSS3的filter，非IE很容易，网上自己找代码吧。
然后做2个DIV，宽度一致，paddnig margin 均为0；
类似于:
<div style="width:960px;height:1px;display:block;">
<div style="float:left;width:480px;height:1px;display:block;" id="line-left"></div>
<div style="float:left;width:480px;height:1px;display:block;" id="line-right"></div>
</div>
IE下可以用
<!--[if IE]>
<style type="text/css">
#line-right{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endColorstr=#00000000,GradientType:1);
}
#line-left{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#ff000000,GradientType:1);
}
</style>
<![endif]-->
如果硬要代码的话，可以用CSS3的filter，非IE很容易，网上自己找代码吧。
然后做2个DIV，宽度一致，paddnig margin 均为0；
类似于:
<div style="width:960px;height:1px;display:block;">
<div style="float:left;width:480px;height:1px;display:block;" id="line-left"></div>
<div style="float:left;width:480px;height:1px;display:block;" id="line-right"></div>
</div>
IE下可以用
<!--[if IE]>
<style type="text/css">
#line-right{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000,endColorstr=#00000000,GradientType:1);
}
#line-left{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#ff000000,GradientType:1);
}
</style>
<![endif]-->
去圣西罗-为尤文喝彩 2011-08-11
- 打赏
- 举报
1个像素宽，3个像素高。
3个像素里，中间一个像素，颜色从左到右一致。上下2根，左右做一点效果，颜色接近底色，中间接近中间线的颜色。这样就中间厚，2变薄了。
然后repeat-x
3个像素里，中间一个像素，颜色从左到右一致。上下2根，左右做一点效果，颜色接近底色，中间接近中间线的颜色。这样就中间厚，2变薄了。
然后repeat-x
TianYa 2011-08-11
- 打赏
- 举报
[Quote=引用 3 楼 changjay 的回复:]
1个像素宽，3个像素高。
3个像素里，中间一个像素，颜色从左到右一致。上下2根，左右做一点效果，颜色接近底色，中间接近中间线的颜色。这样就中间厚，2变薄了。
然后repeat-x
[/Quote]
样式应该怎么写？
1个像素宽，3个像素高。
3个像素里，中间一个像素，颜色从左到右一致。上下2根，左右做一点效果，颜色接近底色，中间接近中间线的颜色。这样就中间厚，2变薄了。
然后repeat-x
[/Quote]
样式应该怎么写？
K-dash 2011-08-10
- 打赏
- 举报
为什么用1*X?
九月 2011-08-10
- 打赏
- 举报
复杂效果不建议用纯css控制 可以考虑用图片填充 做一个 1 * x 的图片就可以了
