Как размыть границы снизу и сверху?

Question

вот так

альтернативный текст 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/