Dica Rápida : Multiplas bordas com CSS
Em suma, qualquer browser que suporte :after e :before (os principais navegadores) pode tirar vantagem deste efeito. Claro, existem alternativas, incluindo o uso de box-shadow, porém esta é uma simples que devemos considerar.
body { background: #d2d1d0; }
#box {
background: #f4f4f4;
border: 2px solid #bbbbbb;
width: 200px;
height: 200px;
margin: 60px auto;
position: relative;
}#box:before {
border: 2px solid white;
content: ”;
width: 198px;
height: 198px;
position: absolute;
}#box:after {
content: ”;
position: absolute;
width: 196px;
height: 196px;
border: 2px solid #bbbbbb;
left: 1px; top: 1px;
}
Vamos fazer um exemplo, com uma div e uma ID chamada “box”
<html>
<head>
<meta charset="utf-8">
<title>Multiplas-Bordas</title>
<style>
body { background: #d2d1d0; }
#box {
background: #f4f4f4;
border: 2px solid #bbbbbb;
width: 200px;
height: 200px;
margin: 60px auto;
position: relative;
}
#box:before {
border: 2px solid white;
content: ”;
width: 198px;
height: 198px;
position: absolute;
}
#box:after {
content: ”;
position: absolute;
width: 196px;
height: 196px;
border: 2px solid #bbbbbb;
left: 1px; top: 1px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
O resultado final será este:
Tweet This
Share on Facebook
Digg This
Save to delicious
Stumble it
RSS Feed
1 Comentário