Блог

Главная - Вопросы по программированию - CSS для тени и границ градиентной рамки

CSS для тени и границ градиентной рамки

#html #gradient #css

#HTML #градиент #css

Вопрос:

Возможно ли это сделать в CSS:

введите описание изображения здесь

Ответ №1:

вот мои 2 цента:

HTML:

 <div class="upperDiv"></div>
<div class="lowerDiv"></div>

CSS:

 .upperDiv {
width:500px;
height: 40px;

background-image: -ms-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%);
background-image: -moz-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%);
background-image: -o-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%);
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 567, color-stop(0, #E4E4E4), color-stop(1.5, #FDFDFD));
background-image: -webkit-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%);
background-image: radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%);

}

.lowerDiv {
width:500px;
height: 40px;

background-image: -ms-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%);
background-image: -moz-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%);
background-image: -o-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%);
background-image: -webkit-gradient(radial, center top, 0, center top, 567, color-stop(0, #FDFDFD), color-stop(0.8, #F0F0F0));
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%);
background-image: radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%);
}

Ширина и высота указаны только для того, чтобы вы могли что-то видеть. Я думаю, что это будет работать в большинстве современных браузеров (хотя это немного многословно)

Ответ №2:

Вот что я собрал вместе. Вы можете немного повозиться с этим, если хотите.

http://jsfiddle.net/Gk6xJ/

Ответ №3:

На самом деле это не ответ на ваш вопрос, но если вам нужно это сделать (и не обязательно в css), я полагаю, что у вас уже есть это, созданное в какой-то другой программе, поэтому вы можете найти это полезным: прощание с градиентами css3

Ответ №4:

Я думаю, к этому можно было бы подойти с двумя разделениями, каждое из которых имеет радиальный градиент. Вот инструмент для экспериментов с градиентами. Он также предоставляет код, зависящий от поставщика.

Ответ №5:

Я делаю что-то подобное на сайте:

 width: 60%; height: 20px; background-image: -moz-radial-gradient(center top , ellipse farthest-side, rgba(100, 100, 100, 0.5), rgba(100, 100, 100, 0) 75%), -moz-radial-gradient(center top , ellipse farthest-side, rgba(200, 200, 200, 0.5), rgba(200, 200, 200, 0)), -moz-radial-gradient(center top , ellipse farthest-side, rgba(200, 200, 200, 0.3), rgba(200, 200, 200, 0)); background-repeat: no-repeat; background-size: 100% 5px, 100% 10px, 100% 15%;