article

border-raduis

	От:	Велимир
	Дата:	08.12.09 06:50
	Оценка:	36 (1)

Доброго времени суток.

Если в примере "border-radius" поменять фон на что — нить темное, то получаются не приятные белые участки в местах закруглений.
Так и есть? Или я делаю что — то не так?

Выглядит это так.

А внутри так:

<html>
  <head>
    <style>
    
      div.container
      {
        flow:horizontal-flow;
        width:*;
        margin: 10px;
        padding:10px;
        border-spacing:10px;
      }
      
      #mono-color
      {
        border-color:black;
      }
     
      #var-colors
      {
        border-color:red gold green blue;
      }
      #fill-no-borders
      {
        border-style:none;
      }
      #fill-borders
      {
        border-color:black;
      }
      
      div.case1
      {
        width:10%;
        height:60px;
        padding: 10px;
        border:1px solid;
        border-radius:7px;
      }
      div.case2
      {
        width:10%;
        height:60px;
        padding: 10px;
        border:3px solid;
        border-radius:10%;
      }      
      
      div.case3
      {
        width:10%;
        height:60px;
        padding: 10px;
        border:3px solid;
        border-radius:20% / height(20%);
      }       
    </style>
  </head>
<body style="background-color: #3E3E3D00;">

  <H1>border-radius css attribute support</H1>
  <div .container >
    <div .case1 #mono-color> case 1 </div>
    <div .case2 #mono-color> case 1 </div>
    <div .case3 #mono-color> case 1 </div>
    <div .case1 #var-colors> case 1 </div>
    <div .case2 #var-colors> case 1 </div>
    <div .case3 #var-colors> case 1 </div>
  </div>
</body>
</html>

Теги:

border-radius, htmlayout

Re: border-raduis

	От:	Велимир
	Дата:	13.12.09 10:11

Добро времени суток.

увы, но в новой версии (3.3.1.41) баг остался:

1) div.case10 c hover выглядит вот так со стилями:

body
{
  background-color: black;
}

div#mono-color > div:hover
{
  border-color:black;
  background-color: white;
}

2) проблема решается при помощи:

div#mono-color > div:hover
{
  border-color:black;
  background-color: transparent;
}

но div.case4 c hover выглядит теперь так

Теги:

3.3.1.41, border-radius, htmlayout

Re[2]: border-raduis

	От:	c-smile	http://terrainformatica.com
	Дата:	13.12.09 19:59

Здравствуйте, Велимир, Вы писали:

В>Добро времени суток.

В>увы, но в новой версии (3.3.1.41) баг остался:

Скачай еще раз, я обновил дистрибуцию (32bit только). Номер версии не менял.

Re[3]: border-raduis

	От:	Велимир
	Дата:	16.12.09 22:43

Здравствуйте, c-smile, Вы писали:

CS>Скачай еще раз, я обновил дистрибуцию (32bit только). Номер версии не менял.

Скачал, смотрю: либо мне уже мерещится, либо там действительно белая "обводка": картинка

и еще остался тот же эффект, что и в предыдущий раз при: картинка

      div#mono-color > div:hover
      {
        border-color:black;
        background-color: transparent;
      }

Спасибо.

Re[4]: border-raduis

	От:	c-smile	http://terrainformatica.com
	Дата:	17.12.09 02:52

Здравствуйте, Велимир, Вы писали:

В>Здравствуйте, c-smile, Вы писали:

CS>>Скачай еще раз, я обновил дистрибуцию (32bit только). Номер версии не менял.

В>Скачал, смотрю: либо мне уже мерещится, либо там действительно белая "обводка": картинка

Что конкретно на этой картинке не нравится?

В>и еще остался тот же эффект, что и в предыдущий раз при: картинка

В>

В>      div#mono-color > div:hover
В>      {
В>        border-color:black;
В>        background-color: transparent;
В>      }
В>

Цвет прозрачности в случае градиентов играет роль.

Т.е. так:

      div.case4
      {
        ....
        border-bottom-width:0; // instead of this:
        //border-bottom-style:none;
      } 

      div#mono-color > div.case4,
      div#mono-color > div.case4:hover,
      div#var-colors > div.case4 
      {
        border-bottom-color:rgba(0,0,0,0.01); // almost transparent black.
      }

Re[5]: border-raduis

	От:	Велимир
	Дата:	17.12.09 04:47

Здравствуйте, c-smile, Вы писали:

CS>Что конкретно на этой картинке не нравится?

вокруг окружности case7 есть белая обводка

Re[6]: border-raduis

	От:	c-smile	http://terrainformatica.com
	Дата:	20.12.09 20:22

Здравствуйте, Велимир, Вы писали:

В>Здравствуйте, c-smile, Вы писали:

CS>>Что конкретно на этой картинке не нравится?

В>вокруг окружности case7 есть белая обводка

background в CSS рисуется на border box — т.е. background, а поверх него borders.
Этот эффект гало что ты наблюдаешь и есть тот background в "антиалиаснутом" виде на rounded border box.

По идее background-clip должен помочь разрулить такие ситуации :
http://www.w3.org/TR/css3-background/#the-background-clip
но пока я этого не сделал.

А вообще если нужен pixel perfection то надо это все делать с помощью expandable background image.