bikin multi border box dengan 1 elemen

18 Nov 2014

Pada dasarnya, ini dibuat dengan pseudo-elemen menggunakan CSS (:before dan :after) dan Untuk memberikan beberapa latar belakang dan perbatasan,elemen diletak an balik lapisan konten dan disematkan ke titik-titik yang diinginkan dari elemen HTML menggunakan posisi absolute

Pseudo-elemen tidak mengandung konten yang benar dan benar-benar diposisikan. Ini berarti bahwa box dapat ditarik untuk tetap di atas area dari elemen induk tanpa mempengaruhi isinya. Hal ini dapat dilakukan dengan menggunakan kombinasi nilai untuk bagian atas, kanan, bawah, kiri, lebar, dan tinggi merupakan kunci untuk fleksibilitas border box

pseudo-elemen

1234567891011121314151617181920212223242526272829#borders {
   position: relative;
   z-index: 1;
   padding: 30px;
   border: 5px solid #f00;
   background: #ff9600;
}
#borders:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid #ffea00;
   background: #4aa929;
}
#borders:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border: 5px solid #00b4ff;
   background: #fff;
}

1<div id='borders'>isi konten disini </div>

Ini adalah salah satu contoh bikin border lebih dari 1 border atau multi border dengan menggunakan pseudo-elements CSS(:before and :after)

Bikin multi border pada 1 elemen dengan css bisa di kreasikan lagi sesuai kebutuhan dan selera
source : http://nicolasgallagher.com

css

Taufik 12.38