Κι όμως είναι εφικτό να δημιουργήσουμε αυτό το όμορφο εφέ, χωρίς τη
χρήση εικόνας, απλά και μόνο με τη χρήση css. Πιο συγκεκριμένα με την
χρήση της ιδιότητας :before και :after. Ας το δούμε στην πράξη:
Δημιουργούμε ένα div με id box
<div id="box">Κείμενο</div>
Το CSS για το box:
#box {
background: #f4f4f4;
border: 1px solid #bbbbbb;
width: 200px;
height: 200px;
margin: 60px auto;
position: relative;
}
Σημειώστε ότι το position:relative είναι σημαντικό. Στη συνέχεια χρησιμοποιούμε την ιδιότητα :before και :after ως εξής:
#box:before {
border: 1px solid white;
content: '';
width: 198px;
height: 198px;
position: absolute;
}
To ύψος (height) και το πλάτος (width) πρέπει να είναι 200 px μείων 2 (το border δεξιά και αριστερά)
#box:after {
content: '';
position: absolute;
width: 196px;
height: 196px;
border: 1px solid #bbbbbb;
left: 1px; top: 1px;
}
Ομοίως το ύψος και το πλάτος έχει ακόμα μία μείωση των δύο pixel. Η
τελευταία παράμετρος διορθώνει το κεντράρισμα του δεύτερου (εσωτερικού)
border.