Как сделать раскладку за углом чистого CSS и HTML? - PullRequest
1 голос
/ 23 июня 2009

Совместимым и наиболее удобным способом?

Ответы [ 7 ]

7 голосов
/ 23 июня 2009

чистый CSS и HTML? (при условии, что вы не имеете в виду использование изображений для углов или фонового изображения ....)

ряд браузеров поддерживают округленные границы например,

-moz-border-radius
-webkit-border-radius
border-radius

Однако ни один из них не работает в IE

(см. Ответ Джеффа здесь и комментарии.)

1 голос
/ 24 июня 2009

Не помню, где я нашел эту технику, но на этой странице перечислены несколько похожих решений:

<html>
    <head>
        <title>hm</title>
        <style type="text/css" media="screen">
            body{
                background:#000;
            }
            .heading{
                color:#1d4b76;
                padding-top:1em;
                width:10em;
                text-align:center;
            }
            .heading h2 {
                font-size:2em;
                padding:.2em;
                margin:0;
                background-color:#1e1e1e;
            }
            /* Rounded header */
            b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #1e1e1e}
            b.r1{margin: 0 5 0 5px}
            b.r2{margin: 0 2 0 3px}
            b.r3{margin: 0 1 0 2px}
            b.rtop b.r4, b.rbottom b.r4{margin: 0 0 0 1px; height: 2px; background:#1e1e1e;}
        </style>
    </head>
    <body>
        <div class="heading">
            <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
            <h2>Example!</h2>
            <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
        </div>        
    </body>
</html>

Для сайта, на котором я это использовал, я удалил правые поля, чтобы использовать их для выровненных по правому краю заголовков (b.r1{margin: 0 0 0 5px} и т. Д.):

Пример закругленного угла http://img81.imageshack.us/img81/1796/picture4o.png

1 голос
/ 23 июня 2009

на данный момент закругленные углы поддерживаются в Firefox и Safari через расширение браузера

закругленный угол является частью спецификации CSS3, поэтому если вы хотите реализовать закругленный угол, используя чистый CSS и HTML, это возможно только с помощью расширений браузера (-moz-border-radius для Firefox -webkit для safari)

вы также можете достичь того же с помощью плагинов JavaScript

0 голосов
/ 21 июля 2009

Привет! Мне недавно пришлось преодолеть ту же проблему: виджет с изменяемыми размерами и закругленными углами, внутреннюю границу, тень и градиентный фон. Он также должен работать во всех браузерах (включая IE6).

Если вы используете Photoshop и правильно присматриваете за исходными файлами, это довольно просто. Всего требуется 4 изображения (до 7 в зависимости от того, как вы поддерживаете IE6), все они могут быть вырезаны из исходного файла Photoshop, так что это довольно просто.

Проверьте ссылку ниже.

http://thatguynamedandy.com/blog/css-widget-rounded-corner-gradient-drop-shadow

0 голосов
/ 23 июня 2009

http://kalsey.com/2003/07/rounded_corners_in_css/

Использует 4 маленьких изображения, хотя

0 голосов
/ 23 июня 2009

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

  • -khtml-border-radius: 5px; / * для Konqueror (браузер Linux) * /
  • -moz-border-radius: 5px; / * для любой версии Firefox * /
  • -webkit-border-radius: 5px; / * для Safari и Google Chrome * /
  • border-radius: 5px; / * для браузеров, которые поддерживают CSS3 * /
0 голосов
/ 23 июня 2009

Если изображения разрешены, сделайте 4 угла в графической программе по вашему выбору, сделайте это фоновым изображением некоторых тегов span / div и выровняйте их должным образом через позицию: absolute; в контейнере, который установлен в положение: относительный ;. Если вы хотите использовать только CSS, вы можете сделать то же самое, но вместо выбора фонового изображения необходимо установить каждый пиксель. В углу 5 на 5 примерно 10-12 тегов. Другими словами, около 40 на панель, что может привести к накладным расходам в 1 (CSS) +1 (div / span) K байтов для одной панели. Хотя лично я бы не стал использовать этот подход, он возможен и, вероятно, будет работать в большинстве браузеров.

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