Как использовать только CSS для скругления углов области тега div? - PullRequest
Новая
       13

Как использовать только CSS для скругления углов области тега div?

9 голосов
/ 04 ноября 2008

Я использую теги div для определения областей на своих веб-страницах. Я установил все очевидные вещи, такие как фон, размер, отступы и т. Д. Но все это очень квадратно.

Как я могу использовать только CSS для скругления углов?

Ответы [ 6 ]

9 голосов
/ 04 ноября 2008

Вот простой HTML-документ, демонстрирующий, как достичь этого только с помощью CSS. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <style>
        .b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}
        </style>
    </head>
    <body>
            <b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
            <div class="contentf">
Content Area Content Area Content Area Content Area Content Area Content Area 
Content Area Content Area Content Area Content Area Content Area Content Area 
Content Area Content Area Content Area Content Area Content Area Content Area 
            </div>
            <b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
    </body>
</html>

Ссылка на оригинал: http://blog.yosle.com/2007/09/20/css-round-corners/

7 голосов
/ 04 ноября 2008

Вы бы использовали свойство border-radius. Однако это поддерживается только в CSS3, который еще не реализован ни одним браузером. Если вам это нужно только для работы в нескольких браузерах, вы можете использовать -webkit-border-radius и -moz-border-radius, которые позволят ему работать в Safari и Firefox соответственно.

Если вы не против использования изображений. Вот метод, который я придумал для создания округленных границ .

2 голосов
/ 04 ноября 2008

Если под «только CSS» вы подразумеваете «без JavaScript», то вы наверняка можете добавить фоновые изображения с закругленными углами к своим элементам. В этом случае вам может потребоваться дополнительная разметка в зависимости от того, насколько вам нужна гибкость.

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

Если вы можете использовать JavaScript, то вы можете попробовать Nifty Corners Cube . Я упоминаю об этом, потому что он работает даже поверх изображений и поддерживает прозрачность.

2 голосов
/ 04 ноября 2008

-moz-border-radius даст вам закругленные углы во всех версиях Firefox. Более полезная информация в Ссылке на Sitepoint CSS .

border-radius даст вам закругленные углы в Safari 3. Подробнее о border-radius в CSS 3 Spec .

0 голосов
/ 04 ноября 2008

В http://www.sitepoint.com/blogs/2005/08/19/dom-foolery-with-images/ есть учебник, в котором объясняется, как устанавливать округленные границы на изображениях. Это может быть полезно для вас, так как изображение установлено в качестве фона div. Хотя вам нужно будет использовать другие изображения и JavaScript. Код JavaScript может быть уменьшен, если вы используете JQuery. o /

0 голосов
/ 04 ноября 2008

Спросите Google о "css закругленные углы без изображений", и вы найдете много, много примеров, как это сделать.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...