Войти
s-lub » Учебники » CSS 3 » Границы и рамки в CSS 3

Границы и рамки в CSS 3

Границы и рамки в CSS 3

Благодаря новым свойствам в CSS 3 стало возможным закруглять углу у различных элементов и рамок, а так же предавать тень объектам.

border-radius

Для закругления углов нужно использовать свойство border-radius, где в качестве значения используются пиксели, в этом нет ничего сложного поэтому сразу рассмотрим его работу на примере:

<html>
<head>
<style type='text/css'>
#el1,#el2,#el3,#el4 {
float:left;
border:2px #000000 solid;
padding:10px;
width:200px;
height:100px;
margin:20px;
background-color:#85004B;
color:#FFF;
font-weight:bold;
}
#el1 {border-radius:5px;}
#el2 {border-radius:10px;}
#el3 {border-radius:20px;}
#el4 {border-radius:35px;}
</style>
</head>
<body>
<p id='el1'> Сдесь углы закруглены на 5 пикселей</p>
<p id='el2'>Сдесь углы закруглены на 10 пикселей</p>
<p id='el3'>Сдесь углы закруглены на 20 пикселей</p>
<p id='el4'>Сдесь углы закруглены на 30 пикселей</p>
</body>
</html>

Если необходимо закруглить только один угол можно использовать следующие свойства:
- border-top-left-radius делает сглаженным только верхний левый угол элемента;

- border-top-right-radius делает сглаженным только верхний правый угол элемента;

- border-bottom-left-radius делает сглаженным только нижний левый угол элемента;

- border-bottom-right-radius делает сглаженным только нижний правый угол элемента.

box-shadow

Свойство box-shadow позволяет добавлять придавать тень различным элементам. Тень может быть как внешней так и внутренней, визуально внешняя тень приподымает объект, а внутренняя придаёт эффект вдавленности.

Пример:

<html>
<head>
<style type='text/css'>
#el1,#el2,#el3 {
float:left;
margin:20px;
padding:10px;
border:1px solid;
width:200px;
height:100px;
}
#el1 {box-shadow:4px 4px black;}
#el2 {box-shadow:6px 6px 6px 2px black;}
#el3 {box-shadow:0px 0px 6px 2px black inset;}
</style>
</head>
<body>
<div id="el1">Внешняя тень</div>
<div id='el2'>Внешняя тень</div>
<div id='el3'>Внутренняя тень</div>
</body>
</html>


- Что такое CSS 3 и что в нём изменилось
- Фон и цвет в CSS 3
- Границы и рамки в CSS 3
- Текст и шрифт в CSS 3
- Создание прозрачных элементов и картинок
- Трансформирование в CSS 3
- Линейные градиенты в CSS 3
- Переходы в CSS 3
- Анимация в CSS 3
- Разбивание текста на столбцы
- Заключение