Outline CSS ~ KODELOVER

CSS Outline Properties
Garis besar adalah garis yang digambar di sekitar elemen - di luar perbatasan. Ini bisa digunakan untuk membuat elemen "stand out".Properti garis besar CSS menentukan gaya, warna, dan lebar garis besar.Elemen ini memiliki border hitam tipis dan garis besar dua kali yang lebar 10px dan hijau.

Garis Besar CSS
Garis besar adalah garis yang ditarik mengelilingi elemen (di luar perbatasan) untuk membuat elemen "menonjol".Namun, garis besar properti berbeda dari properti perbatasan - Garis besar TIDAK merupakan bagian dari dimensi elemen; Lebar dan tinggi elemen tidak terpengaruh oleh lebar garis besar.Garis besar gayaProperti outline-style menentukan gaya garis besar.Properti outline-style dapat memiliki salah satu dari nilai berikut:

    dotted - Mendefinisikan garis besar bertitik
    dashed - Mendefinisikan garis putus-putus
    solid - Mendefinisikan garis besar yang solid
    double - Mendefinisikan garis besar ganda
    groove - Mendefinisikan garis besar beralur 3D. Efeknya tergantung pada nilai garis besar-warna
    ridge - Mendefinisikan garis besar bergerigi 3D. Efeknya tergantung pada nilai garis besar-warna
    inset - Mendefinisikan garis besar inset 3D. Efeknya tergantung pada nilai garis besar-warna
    outset - Mendefinisikan garis besar garis besar 3D. Efeknya tergantung pada nilai garis besar-warna
   none - tidak menentukan garis besar
    hidden - Mendefinisikan sebuah garis besar tersembunyiContoh berikut pertama kali menetapkan batas hitam tipis di sekitar masing-masing elemen <p>, maka ini menunjukkan nilai gaya garis besar yang berbeda:
Contoh

p {
border: 1px solid black;
outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Hasil:

Garis besar bertitik.

Sebuah garis putus-putus.

Garis besar yang solid.

Garis besar ganda.

Garis besar alur. Efeknya bergantung pada nilai garis besar-warna.

Garis besar punggungan. Efeknya tergantung pada nilai garis besar-warna.

Garis besar inset Efeknya tergantung pada nilai garis besar-warna.

Garis besar awal. Efeknya tergantung pada nilai garis besar-warna.

Catatan Catatan: Tidak satu pun dari garis besar CSS luar biasa yang dijelaskan di bawah ini akan memiliki efek APAPUN kecuali properti gaya garis besar yang ditetapkan!Garis besar warnaProperti garis besar digunakan untuk mengatur warna garis besar.Warnanya bisa diatur oleh:

    Nama - tentukan nama warna, seperti "merah"
    RGB - tentukan nilai RGB, seperti "rgb (255,0,0)"
    Hex - tentukan nilai hex, seperti "# ff0000"
    Invert - melakukan inversi warna (yang memastikan garis besar terlihat, terlepas dari latar belakang warna)
Contoh

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

Hasil: Garis besar berwarna.

A colored outline.

Garis Besar Lebar
Properti garis besar menentukan lebar garis besar.Lebar dapat ditetapkan sebagai ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang, atau tebal.
Contoh

p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

Hasil: Garis besar yang tebal dan Garis tipis.

A thick outline.

A thinner outline.

Garis Besar - Properti Singkatan
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti garis besar individu dalam satu properti.Properti garis besar adalah properti singkatan untuk properti garis besar individu berikut:

outline-width
outline-style (required)
outline-color

Contoh

p {
border: 1px solid black;
outline: 5px dotted red;
}

Hasil:
Garis besar

An outline.

Semua Properties CSS Outline
outline Mengatur semua properti garis besar dalam satu deklarasi
outline-color Mengatur warna garis besar
outline-offset Menentukan ruang antara garis besar dan tepi atau batas elemen
outline-style Menetapkan gaya garis besaroutline-width Menetapkan lebar garis besar

KODELOVER

Outline CSS

Related Post