软边使用CSS？

tkqqtvp1 于 2023-05-08 发布在其他

关注(0)|答案(3)|浏览(122)

我使用RGBA创建一个透明的背景，覆盖在图像的顶部。很好用。
我的问题是：有没有一种方法可以“软化”盒子的边缘，使它更多地流入图片而不是硬边缘？
下面是我的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中创建背景图像来做到这一点，但我正在寻找一个CSS唯一的方式，而不是使用图像。
此外，如果可能的话，我更希望这在所有浏览器中都能工作。

css

来源：https://stackoverflow.com/questions/6964794/soft-edges-using-css

3条答案

按热度按时间

nukf8bse1#

另一个选择是使用我个人最喜欢的CSS工具之一：box-shadow。
盒子阴影实际上是节点上的drop-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: 0px -2px 2px rgba(34,34,34,0.6);

这应该给予你一个模糊的顶部边缘。
本网站将提供更多信息：https://css-tricks.com/snippets/css/css-box-shadow/

赞(0）回复(0）举报 2023-05-08

vh0rcniy2#

这取决于你正在寻找什么类型的褪色。
但是有了阴影和圆角，你可以得到一个很好的结果。圆角，因为阴影越大，边缘看起来就越奇怪，除非你用圆角来平衡它。
http://jsfiddle.net/tLu7u/
http://css3pie.com/

赞(0）回复(0）举报 2023-05-08

qlzsbp2j3#

你可以使用CSS渐变--尽管在不同的浏览器中并不一致，所以你必须为每个浏览器编写代码
例如：CSS3 Transparency + Gradient
梯度应更透明的顶部或右上角（取决于能力）

赞(0）回复(0）举报 2023-05-08

我来回答

软边使用CSS？

3条答案

相关问题

热门标签

最新问答