Какой самый простой способ сделать кросс-браузерные скругленные границы в HTML / CSS? - PullRequest
Новая
       24

Какой самый простой способ сделать кросс-браузерные скругленные границы в HTML / CSS?

0 голосов
/ 28 ноября 2009

Я не за «лучший» способ, который требует большой работы над большими изменениями для разных браузеров, но «лучший простой» способ ... в идеале наименее ужасный способ, который будет работать без изменений в IE7 +, FF2 + Хром. Таблицы являются опцией, но, вероятно, немного слишком архаично. Есть ли золотая середина, которая использует CSS без особых хлопот?

И, если вы хотите, чтобы ваши границы были более продвинутыми, чем простые линии, изображения + таблицы - лучший / единственный способ, или есть удобное решение CSS + для изображений?

Ответы [ 5 ]

1 голос
/ 28 ноября 2009

Проверьте сайт CSS Play, на нем много « шикарных границ » и « krazy korners »

1 голос
/ 28 ноября 2009

Я не знаю, является ли javascript опцией, но если это так, я бы порекомендовал jQuery Corner .

Он применяет углы css к браузерам, которые их поддерживают, и углы сценариев для браузеров, которые этого не делают (IE ...).

1 голос
/ 28 ноября 2009

Facebox использует таблицы, это довольно простой способ сделать это и поддерживать IE (6 | 7 | 8). В противном случае, я бы использовал border-radius и доставил бы некоторые не закругленные углы в IE (6 | 7 | 8), что и делал Google долгое время.

0 голосов
/ 28 ноября 2009

Согласовано, если прямоугольник с закругленными углами не является плавным и имеет фиксированную ширину, тогда вам просто нужно использовать 2 изображения, как показано выше. Вы даже можете добавить изображение нижнего закругленного угла к последнему элементу, появляющемуся в блоке, в зависимости от обстоятельств (если это элемент блока), это будет иметь преимущество в отсутствии дополнительной разметки, что всегда является преимуществом.

0 голосов
/ 28 ноября 2009

Лично мне нравится использовать технику " раздвижная дверь ".

Метод, который вы используете, зависит от того, какие элементы вам нужны для закругления углов. Они будут фиксированной ширины или высоты? Вот главный вопрос. Если у вас фиксированная ширина, вы можете просто сделать верхнее изображение (bkg_top.jpg) и нижнее изображение (bkg_bottom.jpg), а затем поместить одно в другое.

Давайте предположим, что вам нужен блок шириной 500px с закругленными углами 10px и цветом фона # 555555.

HTML: 

<div id="content_box">
  <p>lorem ipsum...</p>
  <div id="content_box_bottom"></div>
</div>

CSS: 

#content_box {
background: #555 url(bkg_top.jpg) no-repeat scroll 0 top;
padding-top:10px; /*the height of the top image*/
width:500px;
}

#content_box_bottom {
background: #555 url(bkg_bottom.jpg) no-repeat scroll 0 bottom;
height:10px; /* the height of the image */
}

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

Это всего лишь один пример. Вот еще одна хорошая паутина закругленные углы

...