как сделать края в CSS? - PullRequest
Новая
       7

как сделать края в CSS?

2 голосов
/ 30 января 2012

Я начинающий программист в веб-дизайне, поэтому у меня есть довольно любительский вопрос.Я создал текстовое поле, но я не знаю, как сделать края округлыми, а не прямоугольными.Я знаю, что CSS работает на прямоугольных границах.Если возможно, я также хотел бы добавить небольшую тень под окном, я не уверен, как это реализовать.Вот мой код специально для секции box: 

#wrapper{
border: solid 1px #eeeeee;
}

«# wrapper» относится к фрагменту php-кода в другом документе.Спасибо.

Ответы [ 3 ]

5 голосов
/ 30 января 2012

Использование border-radius и box-shadow. 

#wrapper {
    border: solid 1px #eee;
    border-radius:10px; /* round corners */
    box-shadow:0px 3px 5px 5px #000; /* add shadow */
}

Вот параметры для каждого ... 

border-radius:(radius of border corners)
box-shadow:(horizontal offset) (vertical offset) (blur) (spread) (color)

Возможно, вы захотите добавить к своим свойствам CSS3 префикс -webkit и -moz для повышения совместимости со старыми браузерами.

1 голос
/ 30 января 2012

Для браузеров, которые не поддерживают border-radius, вы можете использовать roundies.js .

1 голос
/ 30 января 2012 
#wrapper {
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
  -moz-border-radius: 12px; /* FF1-3.6 */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

отметьте это out!

...