#box {
  background-color:#0BC7BB;     /* Level 2 */
  border-top:1px solid #C5F0F9; /* Level 1 */
  outline:1px solid #04948A;    /* Level 3 */
}

Lebih Banyak Efek 

Selain untuk menciptakan efek bevel, teknik ini juga bisa digunakan untuk menciptakan efek-efek ganteng lainnya seperti ini:

Efek Benang Jahit 

#F49F2D
#FFFFFF
#box {
  background-color:#F49F2D;  /* Level 2 */
  border:1px dashed #FFFFFF; /* Level 1 */
  outline:4px solid #F49F2D; /* Level 2 */
}

Efek Garis Tepi Berganda 

#6DC2F7
#2C97DA
#box {
  background-color:#2C97DA;  /* Level 2 */
  border:4px solid #6DC2F7;  /* Level 1 */
  outline:4px solid #2C97DA; /* Level 2 */
}

6 Komentar