Закругленные углы на CSS3
До сегодняшнего дня мы изучали с Вами CSS версии 2.1, которая является довольно популярной, и при помощи нее можно создать сайт различной сложности, однако на смену этой версии пришла версия CSS3, которая во много раз упрощает работу веб мастеру, и сегодня мы изучим первое CSS3 свойство, которое называется border-radius. При использовании данного свойства Вам предоставляется возможность задавать закругленные углы у рамки элемента, либо его фона. В предыдущей версии CSS такой возможности мы не имели, и приходилось искать различные обходные пути, для того чтобы сделать закругленные углы у элемента. Как видите, сегодня мы можем это сделать при помощи одной строки кода. Приступим к примеру.
<html>
<head>
<title>Свойство border-radius</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div>Блок с закругленными углами</div>
</body>
</html>
Задаем css стили для блока:
div {
border: 1px solid #000;
border-radius: 10px 30px 15px 40px;
padding: 20px;
width: 200px;
}
Посмотрите на результат выполнения вышеуказанного кода, и начнем разбирать, каким образом устанавливать изучаемое свойство.
Для блока была задана рамка толщиной в один пиксель, для которой мы и установили css свойство border-radius. Значения данного свойства указывается следующим образом, первое значение означает радиус закругления левого верхнего угла, и в дальнейшем по часовой стрелке, в результате мы получили различные радиусы углов со всех сторон. При этом если нам необходимо одинаковое значение со всех сторон, достаточно указать лишь один параметр, и он будет применен ко всем углам элемента. Вот так просто, быстро, а главное красиво можно делать закругленные углы при помощи CSS3. На этом я с Вами прощаюсь, до скорого.
