как этотКак размыть нижнюю и верхнюю границу границы?
alt text http://shup.com/Shup/320903/11032215124-My-Desktop.png
в моей конструкции обе стороны DIV имеет границы, как это и содержание в DIV может быть увеличена или уменьшена. и в любом состоянии обе стороны верхней и нижней части должны быть размыты, как это.
Как это сделать? используя css, изображение любого метода ...
Ниже приведен пример кода градиента 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%
)
Для Safari/Chrome и Firefox можно использовать CSS3 границы-изображения: http://www.css3.info/preview/border-image/
это ваш верхняя часть вашего 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%
)
между этими двумя элементами - это переменная высота t div. для настройки цветов и градиентов, используйте один из тысяч инструментов, таких как http://gradients.glrzad.com/
Мне нужна эта 'border' для' border-right' 'div'. '
ну, тогда вам нужно было бы поместить это вещество в правый позиционированный div, но затем вы могли бы использовать и изображение. я не думаю, что это возможно более элегантным способом. – koko
ok как сделать с изображением.? –
@metal: Вот план. Три изображения, два фиксированных размера, застряли на обоих концах, заканчивающихся градиентом, и один, который растягивается на промежуток между (и который не меняется по цвету в направлении, которое растянуто). Я не могу потрудиться, чтобы работать над этим в правильный ответ, поскольку CSS - это не мое дело. –
@Donal - я хочу сделать с одним изображением или css. –