Знаете ли вы, что и изначально предназначенное свойство для теней блоков box-shadow, может в некоторых ситуациях иметь приоритет по отношению к тому же свойству border
Итак, давайте разберем как с помощью свойства box-shadow сделать простую рамку у блока:
box-shadow:0px 0px 0px 10px #654;Здесь нас интересует только четвертый и пятый параметры свойства, где 10px это радиус размазывания , а #654 цвет.
Преимущества такого подхода по отношению к стандартному свойству border:
Пример допустим мы делаем навигацию , при наведении на одну из ссылок у нас вокруг нее появляется рамка:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="utf-8"/>
<title>Рамки с помощью box-shadow</title>
</head>
<body>
<style>
a{
float:left;
display:inline-block;
margin-left:20px;
text-decoration:none;
padding:5px;
border-radius:4px;
}
a:hover{
box-shadow:0px 0px 0px 2px #654;
/*border:2px solid #654;*/
}
</style>
<nav>
<a href="">Главная</a>
<a href="">О нас</a>
<a href="">Новости</a>
<a href="">О нас</a>
</nav>
</body>
</html>Посмотрите и сравните результат при использовании box-shadow:0px 0px 0px 2px #654;
Затем закомментируйте и попробуйте использовать border:2px solid #654;
Я думаю разница очевидна, но тут следует учитывать, что рамка при использовании box-shadow будет у нас только сплошная и в некоторых ситуациях для того чтобы рамка отобразилась блоку придется задать свойство margin которое больше или соответствует толщине заданной рамки.
Плюс данного свойства еще в том что мы через запятую можем задать сколько угодно значений, то есть есть возможность создавать много рамок. Делая такие интересные эффекты:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="utf-8"/>
<title>Рамки с помощью box-shadow</title>
</head>
<body>
<style>
div{
width:200px;
height:150px;
box-shadow:0px 0px 0px 5px #fff,
0px 0px 0px 7px #00f;
margin:50px auto;
background:green;
border-radius:5px;
}
</style>
<div>
</div>
</body>
</html>Ну вот и все, что я хотел рассказать вам о рамках с помощью свойства box-shadow, включайте свое воображение и творите.
Надеюсь это короткая статья была для вас полезна.Удачи!
