CSS - лучший способ создать такую ​​границу (например, ссылка на сайт) - PullRequest
Новая
       3

CSS - лучший способ создать такую ​​границу (например, ссылка на сайт)

1 голос
/ 02 февраля 2011

Мне нужно сделать рамку для моего сайта, которая выглядит как эта одна.Единственный известный мне способ - разделить сайт на 9 делений, например:

1 2 3

4 5 6

7 8 9

и создайте 8 изображений соответственно:

  • вверху слева (на 1 )
  • верхний центральный (на 2 )
  • верхний правый (на 3 )
  • слева (на 4 )
  • справа (на 6 )
  • внизу слева (на 7 )
  • внизу в центре (на 8 )
  • справа внизу ( 9 )

Div 5 является попыткой в ​​качестве основного.Но вся стратегия выглядит не так удачно.Какие-нибудь советы?Спасибо

Ответы [ 2 ]

1 голос
/ 02 февраля 2011

Я бы использовал два div (один для внешней и один для внутренней границы) и css3 border-radius с плагином jquery для IE.

Я бы порекомендовал плагин jquery Пышные углы , вам не нужно ничего менять;просто добавьте border-radius в css и только браузеры, которые не поддерживают border-radius, будут использовать плагин автоматически.

Но я все равно использую jquery на большинстве своих сайтов, так что это не так уж много.дополнительные накладные расходы.

1 голос
/ 02 февраля 2011

Вы можете использовать CSS3: 

div {
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

Пример: http://jsfiddle.net/nsDRZ/1

Работает во всех современных браузерах. Для IE я рекомендовал t0 использовать CSS3 Pie: http://css3pie.com/

...