Лучшее руководство по CSS3 закругленные углы в 2024 году. В этом руководстве вы можете изучить CSS3 закругленные углы,Поддержка браузеров,CSS3 границы радиуса недвижимости,примеров,CSS3 граница радиуса - указать каждое филе,примеров,примеров,CSS3 закругленные углы недвижимость,
CSS3 закругленные углы
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. Укажите филе фоновое изображение элементы:
Сопряжение!
Код выглядит следующим образом:
примеров
граница радиуса: 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:
Ниже приведен исходный код:
примеров
граница радиуса: 15px 50px 30px 5px ;
фон: # 8AC007;
обивка: 20px;
ширина: 200px;
высота: 150px;
}
# Rcorners5 {
граница радиуса: 15px 50px 30px;
фон: # 8AC007;
обивка: 20px;
ширина: 200px;
высота: 150px;
}
# Rcorners6 {
граница радиуса: 15px 50px;
фон: # 8AC007;
обивка: 20px;
ширина: 200px;
высота: 150px;
}
Попробуйте »
Вы также можете создать эллиптическую угол:
примеров
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;
}
Попробуйте »
CSS3 закругленные углы недвижимость
свойство | описание |
---|---|
граница радиуса | Все четыре угла границы - * - * - радиус свойства Акроним |
границы верхнего левого радиуса | Она определяет верхний левый угол дуги |
границы верхнего правого радиуса | Она определяет верхний правый угол радиан |
границы нижнего правого радиуса | Она определяет дугу в нижнем правом углу |
граница-нижний левый-радиус | Он определяет левый нижний угол дуги |