CSS3 закругленные углы

Используйте CSS3 границы радиуса собственности, вы можете сделать любой элемент "угол".

Поддержка браузеров

Цифры в таблице представляют первый браузер для поддержки номер версии недвижимости.

-webkit- или -moz- предыдущие цифры выразили поддержку первой версии приставки.

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

CSS3 границы радиуса недвижимости

Используйте CSS3 границы радиуса собственности, вы можете сделать любой элемент "угол".

Следующие три примера:

1. Укажите цвет фона закругленного элемента:

Сопряжение!

2. Укажите филе границы элемента:

Сопряжение!

3. Укажите филе фоновое изображение элементы:

Сопряжение!

Код выглядит следующим образом:

примеров

# Rcorners1 {
граница радиуса: 25px;
фон: # 8AC007;
обивка: 20px;
ширина: 200px;
высота: 150px;
}

# Rcorners2 {
граница радиуса: 25px;
границы: 2px твердый # 8AC007;
обивка: 20px;
ширина: 200px;
высота: 150px;
}

# Rcorners3 {
граница радиуса: 25px;
фон: URL (paper.gif);
фон положение: левый верхний;
фон-повторить: повторять;
обивка: 20px;
ширина: 200px;
высота: 150px;
}

Попробуйте »

CSS3 граница радиуса - указать каждое филе

Если указано только одно значение в свойстве границы радиуса, то он будет генерировать четыре филе.

Но если вы хотите, чтобы указать одиннадцать в четырех углах, вы можете использовать следующие правила:

Четыре значения: верхний левый угол первого значения и второе значение в правом верхнем углу, в нижнем правом углу является третьим, а четвертый левый нижний угол.
Три значения: верхний левый угол первого значения , а второе значение является верхний правый и нижний левый, нижний правый угол третьего значения
Два значения: первый верхний левый и нижний правый угол, а второй верхний правый угол и левый нижний угол
Значение: те же четыре округленное значение

Следующие три примера:

1. Четыре значения - граница радиуса: 15px 50px 30px 5px:

2. Три значения - граница радиуса: 15px 50px 30px:

3. Два значения - граница радиуса: 15px 50px:

Ниже приведен исходный код:

примеров

# Rcorners4 {
граница радиуса: 15px 50px 30px 5px ;
фон: # 8AC007;
обивка: 20px;
ширина: 200px;
высота: 150px;
}

# Rcorners5 {
граница радиуса: 15px 50px 30px;
фон: # 8AC007;
обивка: 20px;
ширина: 200px;
высота: 150px;
}

# Rcorners6 {
граница радиуса: 15px 50px;
фон: # 8AC007;
обивка: 20px;
ширина: 200px;
высота: 150px;
}

Попробуйте »

Вы также можете создать эллиптическую угол:

примеров

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Попробуйте »