Question

像这样

alt text http://shup.com/Shup/320903/11032215124-My-Desktop.png

在我的设计中，div的两侧都有这样的边框，div中的内容可以增加或减少。在任何情况下，顶部和底部都应该像这样模糊。

如何实现这一目标？使用CSS，图像任何方法...

Answer 1

这是目前生效的CSS3（Webkit和Moz）渐变代码的示例。如果没有图像，我不认为你所要求的是可行的。也许你可以使用SVG？

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.17, rgb(10,74,133)),
    color-stop(0.78, rgb(146,189,224))
)
-moz-linear-gradient(
    center bottom,
    rgb(10,74,133) 17%,
    rgb(146,189,224) 78%
)

Answer 2

对于Safari / Chrome和Firefox，您可以使用CSS3 border-image：http://www.css3.info/preview/border-image/

Answer 3

这是你固定身高的div的顶部：

-webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.08, rgb(240,240,240)),
    color-stop(0.96, rgb(130,130,130))
)
-moz-linear-gradient(
    center top,
    rgb(240,240,240) 8%,
    rgb(130,130,130) 96%
)

这是你的底部有固定高度

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.08, rgb(240,240,240)),
    color-stop(0.96, rgb(130,130,130))
)
-moz-linear-gradient(
    center bottom,
    rgb(240,240,240) 8%,
    rgb(130,130,130) 96%
)

这两个元素之间的

是你的变量高度div。要自定义颜色和渐变，请使用http://gradients.glrzad.com/

等数千种工具中的一种

如何模糊边框的底部和顶部？

3 个答案: