Rumah > Artikel > hujung hadapan web > Apakah atribut bayangan yang dilaksanakan dalam css3

Apakah atribut bayangan yang dilaksanakan dalam css3

青灯夜游asal: 2021-12-16 15:24:2213860semak imbas

Atribut bayangan yang dilaksanakan dalam css3 ialah: 1. atribut teks-bayang, yang boleh mencapai kesan bayangan teks 2. atribut kotak-bayang, yang boleh mencapai kesan bayangan sempadan, yang perlu digabungkan dengan drop-shadow() Digunakan bersama-sama dengan fungsi, anda boleh menetapkan kesan bayang-bayang pada imej.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

css3 melaksanakan atribut bayang

1 Atribut bayang-teks digunakan untuk menetapkan teks berbayang; anda boleh menetapkan panjang, lebar dan jarak kabur bayang-bayang, serta warna bayang-bayang.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
    </body> 
</html>

Apakah atribut bayangan yang dilaksanakan dalam css3

2 atribut bayang-kotak - untuk mencapai kesan bayang-bayang sempadan

atribut bayang-kotak boleh menggunakan bayang-bayang Untuk. kotak teks, anda boleh menetapkan panjang piksel, lebar dan jarak kabur bayang-bayang serta warna bayang-bayang.

bayang kotak boleh menambah bayang pada elemen, menyokong penambahan satu atau lebih.

Parameter:

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

Apakah atribut bayangan yang dilaksanakan dalam css3 Nota: inset boleh ditulis dalam parameter pertama atau terakhir, kedudukan lain adalah tidak sah.

Jejari kabur bayang:

Parameter ini adalah pilihan hanya jika nilainya 0, ini bermakna bayang tidak mempunyai kesan kabur lebih kecil bahagian tepi bayang-bayang.

kod css:

Kesan:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px #666;
 }

Apakah atribut bayangan yang dilaksanakan dalam css3 Jejari pengembangan bayang-bayang:

Kesan:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px -3px #666;
}

Apakah atribut bayangan yang dilaksanakan dalam css3

Kesan:

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:-5px 5px 5px #666;
}

Apakah atribut bayangan yang dilaksanakan dalam css3 Y-axis offset adalah negatif:

Kesan:

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:5px -5px 5px #666;
}

Apakah atribut bayangan yang dilaksanakan dalam css3 Bayang-bayang luar :

Kesan:

#box{
     width:50px;
     height:50px;
     background:green;
     box-shadow:5px 4px 10px #666;
}

Bayangan dalaman:

Kesan:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset;
}

Tambah berbilang bayang:

Kesan:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset,
                3px 3px 5px pink,
                6px 4px 2px green;
}

Apakah atribut bayangan yang dilaksanakan dalam css3

3 atribut penapis

atribut penapis Mentakrifkan kesan visual unsur (biasanya Apakah atribut bayangan yang dilaksanakan dalam css3 ) Apabila digunakan dengan fungsi drop-shadow(), ia boleh menetapkan kesan bayang-bayang pada imej.

Bayang-bayang ialah versi offset topeng yang digubah di bawah imej, boleh mempunyai kabur dan boleh dilukis dalam warna tertentu. Fungsi ini menerima nilai jenis (ditakrifkan dalam konteks CSS3), kecuali kata kunci "inset" tidak dibenarkan. Fungsi ini sangat serupa dengan sifat kotak-bayang-bayang kotak sedia ada, perbezaannya ialah melalui penapis, sesetengah pelayar menyediakan pecutan perkakasan untuk prestasi yang lebih baik. Parameter adalah seperti berikut:

filter:drop-shadow(h-shadow v-shadow blur spread color);

Menetapkan nilai negatif akan menyebabkan bayang-bayang muncul di atas elemen. Lihat unit yang mungkin untuk .

Jika kedua-dua nilai ialah 0, bayang-bayang muncul terus di belakang elemen (jika dan/atau < ;sebarkan -jejari>, akan ada kesan kabur).

(pilihan)

Ini kod ketiga> ; nilai semakin besar, semakin kabur, dan bayang-bayang akan menjadi lebih besar dan lebih ringan Jika tidak ditetapkan, nilai lalainya adalah 0 tajam).

(pilihan)

Ini ialah nilai menyebabkan bayang mengembang dan berubah Besar, nilai negatif akan mengecilkan bayang jika tidak ditetapkan, lalainya ialah 0 (bayangan akan sama saiznya dengan elemen itu). >Nota: Webkit, dan beberapa penyemak imbas lain tidak menyokong Empat panjang ketiga tidak akan diberikan jika ditambah.

(pilihan)

查看该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>

<p>给图像设置一个阴影效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">

</body>
</html>

Apakah atribut bayangan yang dilaksanakan dalam css3

（学习视频分享：css视频教程）

Atas ialah kandungan terperinci Apakah atribut bayangan yang dilaksanakan dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah tiga sifat animasi utama css3Artikel seterusnya：Apakah tiga sifat animasi utama css3

Artikel berkaitan

Lihat lagi