Закругленные углы с помощью css

#css

Вопрос:

Я написал один css как foolows:

 <style>
#box_1 #box1_bg{
    width: 100px;
    padding-left:0px;
    font-family: "cachet Bold" , "CachetBoldRegular";
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 21px;
    text-align:center;
    padding-top:10px;
    height:30px;
    border-bottom-style:groove;
       -moz-border-radius-bottomleft: 10px;
       -moz-border-radius-bottomright: 10px;
       -webkit-border-bottom-left-radius: 10px;
       -webkit-border-bottom-right-radius: 10px;



}
</style>

Это дает мне структуру, похожую на коробку..
Как я могу получить закругленные углы для этого поля?

1. Я не понимаю вашего вопроса, вы хотите, чтобы все углы этого элемента были закруглены?

2. Я полагаю, вы тестируете в Firefox или браузере webkit? Вы пробовали border-bottom-right-radius: 10px;?

3. Взгляните на css3pie.com — это хак для IE, который предоставляет ему поддержку border-radius (и не только).

Ответ №1:

Вам нужно добавить фон или рамку, чтобы увидеть закругленные углы.

 #box_1 #box1_bg{
    width: 100px;
    padding-left:0px;
    font-family: "cachet Bold" , "CachetBoldRegular";
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 21px;
    text-align:center;
    padding-top:10px;
    height:30px;
    border:5px groove yellow;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}

Ответ №2:

Если вы не используете браузер, поддерживающий CSS3, вы не увидите изогнутые углы. Сюда входят все версии IE до 8 включительно. Также убедитесь, что у вас есть border-color определенный, чтобы вы действительно могли видеть границу или, альтернативно, background-color .

Ответ №3:

Я использую border-radius:10px; , и это работает в FF4, Chrome, Safari и Opera.

В качестве альтернативы вы могли бы сделать border-radius:10px 3px 7px 2px для разных радиусов для каждого угла

и не забудьте background:#000; или что-нибудь еще, чтобы придать вашей коробке некоторый внешний вид

Ответ №4:

В каком браузере вы просматриваете это?

Обратите внимание, что вызывается стандартное свойство border radius css3 border-radius

Вы применяете свои правила только к браузерам Mozilla и webkit.

Подобный кроссбраузерный селектор должен это делать:

 .round {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-radius:0 0 10px 10px;
/* optional behavior: url(border-radius.htc) */ 
}

примечание: файл .htc используется только в том случае, если вам нужно принудительно установить поддержку IE6-8.

1. Я обнаружил, что взлом IE .htc в лучшем случае ненадежен, при некоторых установках, любой версии, IE просто взрывается.

2. Да, на самом деле более надежным решением является использование PIEcss3 или условных комментариев и фоновых изображений (что является наиболее надежным подходом, насколько я тестировал). Относительная позиция часто устраняет проблемы с .htc.

Ответ №5:

используйте следующие стили:

 border-radius: 10px 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;

Взято из http://www.handycss.com/tips/pure-css-rounded-corners