border-top-left-radius | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Главная » Справочник CSS3 » Свойства углов


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


border-top-left-radius | Свойство CSS

Свойство border-top-left-radius закругляет левый верхний угол.




Свойство border-top-left-radius закругляет границу левого верхнего угла элемента.Могут быть использованы положительные значения чисел,а так же процентные соотношения записанные через пробел ( по оси x и y ).Если Вы хотите указать процентное соотношение то первым значением идёт значение x,зависящее от ширины блока,а второе значение y,зависящее от высоты блока.То есть если у Вас блок 100 x 100 px,а процентная запись равна border-top-left-radius:10% 10%;,закругление будет происходить величиной равной 10px.Можно указать и 2 числовых значения где первое значение указывается для ширины,а второе для высоты,записывается через пробел.Значения для эллипсных углов прописываются с теми же правилами что и числовые с процентными но с добавлением слэша ( / ),пример border-top-left-radius:10px/10px 10%/10%;.Свойство применимо к элементам кроме элементов таблицы,у которых свойство border-collapse сопровождается значением collapse,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




Дополнительные свойства применяемые к border-top-left-radius


Свойство
Описание
border-radiusСокращённый вид записи для всех четырёх углов
-webkit-border-top-left-radiusАльтернативное свойство для Safari и Chrome
-moz-border-radius-topleftАльтернативное свойство для Mozila


Дополнительные значения применяемые к border-top-left-radius


Значение
Описание
<Число>Любое положительное число
<Процент>Значение в процентах

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border-top-left-radius</title>
<meta charset="utf-8">
<style type="text/css">
<!--
div {
border:10px double red;
padding:10px;
color:#fff;
width:300px;
height:70px;
background:green;
border-top-left-radius:80px;
}
-->
</style>
</head>
<body>
<div>Закругляем левый верхний угол</div>
</body>
</html>

Пример в действии




Генератор свойства border-radius



Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-background/#border-top-left-radius
Категория: Свойства углов | Добавил: IZOTOP (11.05.2012) | Автор: Меренков Михаил E W
Просмотров: 492 | Теги: css, что означает, style, border-top-left-radius, для чего | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]