Fungsi Properties Outline-Offset CSS3

Hallo, sebelumnya kita telah membahas tentang properties css3 yaitu outline, pada tutorial kali ini saya akan membahas salah satu properties lagi yang ada di css3 yaitu outline-offset, properties outline-offset ini berfungsi untuk memberikan

Jarang antara tepi element bagian luar dengan tepi garis outline bagian dalan suatu element, nah mungkin daripada bingung kita langsung saja praktekan, teman-teman silahkan buat sebuah file dan ketikan script berikut :

<div>Dumet School</div>

Nah, sekarang kita atur cssnya sekarang, silahkan ketikan script berikut :

div {
    margin: 60px;
    text-align:center;
    width: 150px; 
    height: 70px;
    border: 2px solid blue;
    outline: 2px solid red;

}

Saya memberikan 2 garis tepi dengan berbeda warna yaitu border dan outline, maka hasilnya akan seperti berikut :

Nah, hasilnya ada 2 warna garis tepi karna saya menambahkan outline dan border, sekarang coba tambahkan script CSS berikut :

div {
    margin: 60px;
    text-align:center;
    width: 150px; 
    height: 70px;
    border: 2px solid blue;
    outline: 2px solid red;
    outline-offset:20px;

}

Nah jika sudah save maka hasilnya akan seperti berikut :

Hasilnya akan ada jarak antara garis luar border dengan haris bagian dalam outline sebanyak value yang kita berikan pada properties outline-offset.

Oke cukup sekian artikel kali ini semoga bermanfaat.

Kategori