Вопросы Теги

Как сделать перекрестный браузер, W3C допустимый, семантический, не-JavaScript КРУГЛЫЙ угол?

Вы можете добавить второй вход, как и первый, и объединить его после:

8
задан Daniel Rikowski 14 April 2009 в 08:21
поделиться

10 ответов

Два основных движка рендеринга уже давно поддерживают CSS3, что делает закругленные углы такими простыми, как: 

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Конечно, это не оказывает никакого влияния на IE6 или 7 (это работает в IE8) или 8, поэтому вам нужно реализовать мерзкое разделение по стопкам с изображениями для углов, что не соответствует вашей семантике требование.

Я не фанат экранных хаков, которые включают в себя javascript или css-хаки - поэтому я использую CSS3 и проверяю, что квадратная версия в IE7 выглядит приемлемой. Я делал это некоторое время, так как IE никогда раньше не поддерживал прозрачность PNG - это означало, что вы не можете красиво наложить закругленное угловое изображение на узорчатый фон. IE8 - большое улучшение, поэтому проблема начинает исчезать, но я понимаю ваше желание заставить его работать на IE6 и выше.

ОБНОВЛЕНИЕ: Различные фрагменты CSS3, которые изначально планировалось включить в IE8, были фактически удалены из финальной версии. пограничный радиус был одной из жертв.

22
ответ дан 5 December 2019 в 05:19
поделиться

You could use the technique described here (it's for an Apple Dashboard Widget, but the HTML/CSS should be the same). It uses nine images and doesn't require any JavaScript.

Steve

0
ответ дан 5 December 2019 в 05:19
поделиться

Это должно позволить вам получить желаемый результат. Старый сложенный метод DIVs с одним большим фоновым изображением. Вам нужно создать очень большое фоновое изображение, например 2000 x 2000 пикселей, где вы будете рисовать прямоугольник с закругленными углами. Я рекомендую сохранить его в формате .GIF с прозрачным фоном, чтобы обеспечить совместимость с IE6, так как вы хотите избежать JavaScript. Обратите внимание, что границы в этом примере просто помогают понять, где элемент появляется и могут быть удалены.

Я протестировал его на IE6, IE7, Firefox 2 и 3, Safari и Opera. Надеюсь, это поможет. 

<html>
<head>
  <style type="text/css">
    .RoundRectInside
    {
      width: 100%;
      background: url(BigBackground.gif) top left no-repeat;
      overflow: hidden;
    }

    .RoundRectOutside
    {
      width: 20em;
      height: 20em;
      background: url(BigBackground.gif) bottom left no-repeat;
      overflow: hidden;
      position: relative;
    }

    .RoundRectTopRight
    {
      float: right;
      /* Width and Height should correspond to width and height of rounded corner */
      width: 30px;
      height: 30px;
      background: url(BigBackground.gif) top right no-repeat;
      overflow: hidden;
      position: absolute;
      top: 0;
      right: 0;
    }

    .RoundRectBottomRight
    {
      float: right;
      /* Width and Height should correspond to width and height of rounded corner */
      width: 30px;
      height: 30px;
      background: url(BigBackground.gif) bottom right no-repeat;
      overflow: hidden;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div class="RoundRectOutside">
    <div class="RoundRectInside">
      <div>Content goes here</div>
      <div class="RoundRectTopRight"></div>
    </div>
    <div class="RoundRectBottomRight"></div>
  </div>
</body>

</html>
1
ответ дан 5 December 2019 в 05:19
поделиться

Короткий ответ: вы не можете делать все, что хотите, без CSS3, который не реализован ни в одной, кроме последних версий браузеров.

Итак, ответ - либо использовать CSS3 (как описано выше у Sohnee), либо научиться любить решения javascript / divs / images. И убедитесь, что он отображается нормально, когда браузер, в котором нет ни одного из них, смотрит на него ...

6
ответ дан 5 December 2019 в 05:19
поделиться

Я не знаю, что вы подразумеваете под семантическими или растягиваемыми закругленными углами, но вы можете использовать атрибуты CSS border-radius для Webkit и Firefox, и просто использовать комбинацию изображений PNG и этот HTML-компонент , который добавляет поддержку альфа-канала PNG в IE6.

0
ответ дан 5 December 2019 в 05:19
поделиться

Если вы используете PNG8 с альфа-прозрачностью, изображения могут иметь прозрачность в IE6. Предостережения заключаются в том, что вы можете иметь только полностью прозрачные или непрозрачные изображения (все, что между ними будет просто визуализировано на 100% прозрачно), и что вы не можете использовать большую цветовую палитру или градиенты.

В зависимости от вашей конструкции возможен обходной путь, или вы можете использовать его вместе с опцией PNG8 выше. Если ваш фон простой, вы можете просто сопоставить что-либо вне углов с фоном. Используя эту технику, вы можете легко обойтись с одним изображением для ваших углов, если вы используете спрайты. Разметка будет выглядеть примерно так: 

<div id="content">
     <span class="lt"></span>
     <span class="rt"></span>
     <span class="lb"></span>
     <span class="rb"></span>
</div>

И CSS: 

#content {position:relative;}

/*These styles are generic and can be reused over multiple corner types*/
.lt, .rt, .lb, .rb{
    background:url(../images/button_corners.png) no-repeat;
    width:5px;
    height:5px;
    position:absolute;
}
.lt, .rt{top:0px;}
.rt, .rb{right:0px;}
.lt, .lb{left:0px;}
.rb, .lb{bottom:0px;}

/*The following would be used specifically for #content, but you could reuse a different part of the same image for a different container or button */

#content .lt{background-position:-200px 0px;}
#content .rt{background-position:-245px 0px;}
#content .lb{background-position:-200px -45px;}
#content .rb{background-position:-245px -45px;}

У этого подхода есть свои преимущества и недостатки:

Преимущества

Это кросс-браузер, он работает с жидкими и фиксированными макетами, и вы можете использовать его для элементов меню (hover будет работать в IE6 для ссылок) или контейнеров, для него не требуется JavaScript , а с помощью спрайта CSS вы можете сделать это с одним изображением, даже с несколькими типами углов.

Недостатки

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

<script type="text/javascript">document.execCommand("BackgroundImageCache",false,true);</script>
0
ответ дан 5 December 2019 в 05:19
поделиться

Это лучшее, что я нашел до сих пор.

http://apptools.com/examples/oundedbox.php

Это кросс-браузер, W3C действителен и использует только одно изображение . но мы не можем сделать границу с этим.

Это решение для фиксированной ширины с границей.

используется небольшая разметка Содержание

` с действительным CSS, HTML http://www.askthecssguy.com/examples/tained/ornCorners/index.html

0
ответ дан 5 December 2019 в 05:19
поделиться

Если вы не Не возражая против использования Javascript только для IE, вы можете использовать условные комментарии и Javascript для динамической вставки округлостей VML, которые могут делать то, что вы хотите (или просто использовать статический условно закомментированный VML). CSS3 радиус границы охватывает Gecko, WebKit и KHTML. Opera требует фоновое изображение SVG.

Вот пример, взятый из одного из моих проектов: http://entr0py.org/misc/reader/basic/

Мне сказали, что в нем все еще есть некоторые ошибки WebKit. относится к окраске фона, но во всем остальном работает нормально.

0
ответ дан 5 December 2019 в 05:19
поделиться

Я уверен, что метод минимального округления углов без js для ie6 / 7 требует 2 маленьких изображения (верх и низ ) и 1 дополнительный div для блоков фиксированной ширины и 3 небольших изображения (внизу, слева и справа) и 3 дополнительных div для блока переменной ширины.

Фиксированная ширина 

<div class="box">
<div class="bottom">
gjkgjk
</div>
</div>

.box {background:url(image to round off the top) top left no-repeat:padding:0;}
.box .bottom {background:url(image to round off the bottom) bottom left no-repeat:margin:0;width:100px}

Переменная ширина 

<div class="box">
<div class="top-right">
<div class="bottom-left">
<div class="bottom-right">
gjkgjk
</div>
</div>
</div>
</div>

.box {background:url(image to round off the top-left) top left no-repeat:padding:0;}
.box .right{background:url(image to round off the top-right) top right no-repeat:padding:0;margin:0;}
.box .bottom-left {background:url(image to round off the bottom-left) bottom left no-repeat:margin:0;padding:0;}
.box .bottom-right {background:url(image to round off the bottom-right) bottom right no-repeat:margin:0;padding:0;}

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

0
ответ дан 5 December 2019 в 05:19
поделиться

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

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

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

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

0
ответ дан 5 December 2019 в 05:19
поделиться