CSS - Garis Besar

Garis besar sangat mirip dengan perbatasan, tetapi ada beberapa perbedaan utama juga -

Garis besar tidak memakan tempat.
Garis tidak harus berbentuk persegi panjang.
Garis besar selalu sama di semua sisi; Anda tidak dapat menentukan nilai yang berbeda untuk sisi elemen yang berbeda.

NOTE - Properti garis besar tidak didukung oleh IE 6 atau Netscape 7.

Anda dapat mengatur properti garis besar berikut menggunakan CSS.

Itu outline-width properti digunakan untuk mengatur lebar garis.
Itu outline-style properti digunakan untuk mengatur gaya garis untuk garis besar.
Itu outline-color properti digunakan untuk mengatur warna garis besar.
Itu outline properti digunakan untuk mengatur semua tiga properti di atas dalam satu pernyataan.

Properti lebar garis

The garis-lebar menspesifikasikan properti lebar garis yang akan ditambahkan ke kotak. Nilainya harus panjang atau salah satu nilai tipis, sedang, atau tebal, seperti atribut lebar batas.

Lebar nol piksel berarti tidak ada garis luar.

Berikut ini contohnya -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti bergaya kerangka

Properti outline-style menentukan gaya garis (solid, dotted, atau dashed) yang mengelilingi sebuah elemen. Ini dapat mengambil salah satu dari nilai berikut -

none- Tanpa batas. (Setara dengan lebar garis: 0;)
solid - Garis adalah satu garis utuh.
dotted - Garis besar adalah serangkaian titik.
dashed - Outline adalah rangkaian garis pendek.
double - Garis besar adalah dua garis utuh.
groove - Garis tampak seolah-olah diukir pada halaman.
ridge - Garis tampak kebalikan dari alur.
inset - Garis besar membuat kotak terlihat seperti tersemat di halaman.
outset - Garis membuat kotak terlihat seperti keluar dari kanvas.
hidden - Sama seperti tidak ada.

Berikut ini contohnya -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti warna kerangka

The garis warna properti memungkinkan Anda untuk menentukan warna garis. Nilainya harus berupa nama warna, warna hex, atau nilai RGB, seperti pada properti color and border-color.

Berikut ini contohnya -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Properti garis besar

The garis properti adalah properti singkatan yang memungkinkan Anda untuk menentukan nilai-nilai untuk salah satu dari tiga sifat dibahas sebelumnya dalam urutan apapun tetapi dalam satu pernyataan.

Berikut ini contohnya -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -