Закругленный поворот CSS Crnr

Question

Закругленный поворот CSS Crnr

html,css,

0

Ответов: 2

HTML, CSS,

Похожие вопросы

score 3 · Answer 1

3 принят

Я только дал сайту короткий пик, и в основном они предоставляют вам пару PNG. Неплохо, однако это не лучшее решение во всех случаях. Поскольку текущий стандарт CSS не поддерживает округленные углы, а рядом с Firefox / Mozilla никто не понимает этого:

-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

Я думаю, вы застряли только с одним вариантом. Выберите постоянную высоту и ширину для своего элемента и создайте ОДИН png из него. Вы можете создать что-то вроде этого

span{
 display:block;
 width:100px; height:100px;     
 background-image:url("nice.png");
}

span:hover{
 background-image:url("nice_hover.png");
}

Почему я думаю, что другого пути нет? Потому что вы можете эффективно изменять атрибуты одного элемента за раз с эффектом «зависания». Надеюсь, CSS3 даст нам закругленные углы ... Однако, если вы используете JavaScript, это совсем другая история.

Обновить

Я подумал об этом, и я, вероятно, плюхнулся, представив вам все доступные варианты. Вот работающее решение для IE7 +, FF, Opera, которое обеспечивает именно то, что вы ищете. Просто замените цвет некоторым фоновым изображением. Сожалею!

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
    <style type="text/css">
      .content p{
        position:relative;
        height:100px;
        width:400px;
        border:1px solid black;
      }
      .content p span{
        position:absolute;
      }

      .content p .span1{
        left:0;
        top:0;
      }

      .content p .span2{
        right:0;
        top:0;
      }

      .content p .span3{
        left:0;
        bottom:0;
      }

      .content p .span4{
        right:0;
        bottom:0;
      }

      .content p:hover .span1{
        background-color:red; 
      }

      .content p:hover .span2{
        background-color:blue; 
      }

      .content p:hover .span3{
        background-color:green; 
      }

      .content p:hover .span4{
        background-color:yellow; 
      }
    </style>
  <body>
    <div class="content">
      <p>
        <span class="span1">1</span>
        <span class="span2">2</span>
        <span class="span3">3</span>
        <span class="span4">4</span>
      </p>
    </div>
    </body>
</html>

score 0 · Answer 2

0

Я бы порекомендовал сделать это в JavaScript, тогда это позволит использовать квадратные прямоугольные прямоугольники с переменным размером.