css3 - 使用CSS的软边缘?

  显示原文与译文双语对照的内容
0 0

我使用RGBA来创建一个透明的background,它覆盖在图像的顶部。 工作正常。我的问题是: 有办法把盒子的边缘"柔和"到它flows的地方 vs 硬边。

下面是我的文本框的CSS:

#past{
 position:absolute;
 left:0;
 top:363px;
 background-color: rgba(34,34,34,0.6);
/* For IE 5.5 - 7*/
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
/* For IE 8*/
 -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
 z-index:10;
 padding:10px;
}

我知道我可以以通过在Photoshop中创建一个 background 图像来做这个,但是我正在查找一个使用图像的CSS 。

而且我更愿意在所有浏览器中都能工作。

感谢你的帮助。=>

时间:原作者:4个回答

0 0

另一种选择是使用我最喜欢的CSS工具: box-shadow

长方体阴影实际上是节点上的投影。 它看起来像这样:

-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,0,.5);

参数包括:

1px: Horizontal offset of the effect. Positive numbers shift it right, negative left.
2px: Vertical offset of the effect. Positive numbers shift it down, negative up.
3px: The blur effect. 0 means no blur.
color: The color of the shadow.

因此,你可以保留当前的设计,并添加一个 box-shadow,如下所示:

box-shadow: 0px -2px 2px rgba(34,34,34,0.6);

这应该给你一个'模糊'上边缘。

这里网站将帮助你了解更多信息: http://css-tricks.com/snippets/css/css-box-shadow/

原作者:
0 0

这取决于你要寻找的褪色类型。

但是有了阴影和圆角你就能得到很好的结果。 圆角,因为阴影越大,它越奇怪,除非你用圆角平衡它。

http://jsfiddle.net/tLu7u/

还有。http://css3pie.com/

原作者:
0 0

你可以以使用CSS梯度- 尽管浏览器之间没有一致性,因这里你必须对每个浏览器进行编码。

例如:CSS3透明+ 渐变

在顶部或者右上角( 取决于能力),渐变应该更加透明。

原作者:
...