Знаете ли вы, что мы можем достичь нескольких границ с помощью простого CSS, используя псевдо-классы : after amd : before ? Это то, что я недавно узнал сам ! Я покажу вам, как добавить больше глубины вашим проектам без изображений, всего за несколько минут.
Предпочитаете смотреть это видео на Screenr ?
Окончательный код
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»utf-8″>
<title>Multi-Borders</title>
<style>
body { background: #d2d1d0;
#box {
background: #f4f4f4;
border: 1px solid #bbbbbb;
width: 200px;
height: 200px;
margin: 60px auto;
position: relative;
}
#box:before {
border: 1px solid white;
content: »;
width: 198px;
height: 198px;
position: absolute;
}
#box:after {
content: »;
position: absolute;
width: 196px;
height: 196px;
border: 1px solid #bbbbbb;
left: 1px;
}
</style>
</head>
<body>
<div id=»box»></div>
</body>
</html>
|
Короче говоря, любой браузер, который поддерживает псевдоэлементы : before и : after (все основные браузеры), может воспользоваться этим эффектом. Конечно, есть альтернативы, в том числе использование box-shadow , а также добавление дополнительной разметки на страницу; Тем не менее, это чистое решение, которое вы должны обязательно рассмотреть. Спасибо за просмотр!