CSS Outline Property

Sekalipun outline properties mempunyai value yang sama dengan border dan juga mampu memberikan hasil seperti layaknya border, namun anda harus berhati-hati saat menggunakan outline property. CSS outline property tak bisa dimasukkan sebagai bagian dari box, sekalipun outline selalu berada disekeliling box (posisinya berada setelah content, padding dan border). Dia seperti sebuah bayangan yang mampu menabrak apapun tanpa menggeser unsur/box/bidang yang ada disekelilingnya. Jika boleh dikatakan, outline property seperti sebuah elemen dengan absolute position.

Cara penulisan outline property

outline: style | color | width;
Keterangan:
posisi value/nilai dapat dibolak-balik!

Contoh penulisan outline property dalam sebuah syntax css

div{
      margin:40px auto;
      width:400px;
      height:250px;
      padding:20px;
      border:4px solid red;
      outline:20px double green;
}
outset outset
Outline Properties
value
Cara Penulisan Outline
outline-width
px
outline: width style color;
em
outline: style width color;
%
outline: width color style;
medium
outline: style color width;
thin
outline: color width style;
thick
outline: color style width;
outline-style
dashed
Contoh:
dotted
outline:20px double red;
double
outline: ridge 2em #000;
groove
outline: medium rgba(50,50,50,0.6) dashed
hidden
outline: solid rgb(255,0,255) thick;
inherit
outline: #888 10px dotted;
inset
outline: blue inset 4em;
none
ridge
 outline: none;
outline-color
hex
outline: none !important;
color names
  
rgb
rgba
hsl
hsla
Di bawah ini disertakan demo penggunaan outline property. Lakukan beberapa perubahan berkaitan dengan value/nilai outline-property sehingga diperoleh hasil berbeda. Anda bisa menggunakan berbagai value/nilai yang telah disertakan di bagian atas.
Please click the button to display. Continue with editing code and click to see the results!
Diposting oleh di
Label: ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

My ProfileC l o s e

FollowerC l o s e