Градиент Граница исчезает вокруг div с помощью css / html

Question

Привет. Я пытался выяснить, как создать границу, которая исчезает в цвете фона div, и это единственное решение, которое я смог придумать.Я гуглил, и кажется, что люди предлагают CSS3, но мне сказали, что он все еще "находится в стадии разработки" и не полностью представлен в современных браузерах, поправьте меня, если я ошибаюсь, вероятно, есть.

В любом случае этоРешение, которое я придумала, есть ли более простые способы сделать это или это разумный подход?

Создано множество элементов div для каждой части границы (как показано ниже), и установите их фоновое изображение в соответствии с частьюграницы: http://i.imgur.com/sh6Z8.png

HTML & CSS: http://codeviewer.org/view/code:1e4f

(плохо знакомы с веб-разработкой и переполнением стека, извините, если я делаю что-то необычное, спасибо).

Answer 1

Так как Тим уже сказал это, если ширина вашего сайта статична, вы можете сделать что-то подобное (на самом деле, даже если css3 может быть хорошим вариантом для вашего случая использования, это очень просто ...)

http://jsfiddle.net/Xtw84/3/ - это из предыдущего ответа, поэтому края не мягкие, но идея та же.(не имеет значения) Я также добавил изображение в фоновом режиме, чтобы вы могли видеть, как это будет работать.Нет необходимости ... на самом деле нет смысла разрезать фоновое изображение пополам.

Вот его более урезанная версия.http://jsfiddle.net/Xtw84/4/

---

С помощью css3 я бы сделал это с box-shadow и просто расширил бы тень настолько, насколько это необходимо.

Answer 2

Ваш макет будет плавным?например, он будет расти в ширину / высоту?Если он не будет расти по ширине, то нет причин, по которым вы не можете просто установить фоновое изображение.

Для того, что вы делаете, я бы не использовал градиентные границы и просто придерживался изображений вфон.