cari

Rumah  >  Artikel  >  hujung hadapan web  >  Terdapat beberapa kategori bayang-bayang dalam css3

Terdapat beberapa kategori bayang-bayang dalam css3

青灯夜游
青灯夜游asal
2022-03-18 17:51:552669semak imbas

Bayang-bayang dalam CSS3 terbahagi kepada 2 kategori: 1. Bayang teks, sintaks tetapan "bayang-teks: kedudukan mendatar kedudukan menegak warna jarak kabur;"; kedudukan Kedudukan menegak inset warna kabur jarak;".

Terdapat beberapa kategori bayang-bayang dalam css3

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

Terdapat dua jenis bayang dalam CSS3: teks-bayang dan kotak-bayangan ini boleh mencapai kesan bayangan tanpa menambah imej latar belakang dan disediakan apabila kami mencantikkan halaman web. Jadi bagaimana untuk menggunakan kedua-dua atribut ini?

1 bayang teks

Spesifikasi sintaks atribut ini ialah teks-bayang: 1px 1px 1px #. 666 ;

Sebelum bercakap tentang sifat bayangan css, mari kita fahami akal budi tentang bayang-bayang terlebih dahulu.

Bayang-bayang dijana apabila cahaya memancar pada objek, yang akan menghasilkan bayang-bayang di kawasan bercahaya belakang.

Seperti yang ditunjukkan di bawah, ia adalah bayang yang dihasilkan oleh kanan dan bawah:

Terdapat beberapa kategori bayang-bayang dalam css3

Gambar di bawah ialah bayang yang dihasilkan oleh ke atas dan kiri

Terdapat beberapa kategori bayang-bayang dalam css3

Mari lihat pada atribut teks-bayang-bayang Atribut termasuk empat nilai Nilai pertama ialah mengimbangi mendatar bayang-bayang, nilai kedua mewakili mengimbangi menegak, dan nilai ketiga mewakili. julat Divergence, nilai keempat mewakili warna bayang-bayang.

1. Secara lalai, nilai positif digunakan untuk bayang-bayang di sebelah kanan dan bawah, dan nilai negatif digunakan untuk bayang-bayang kiri dan atas.

bayang-teks: 1px 1px 1px #666 bermaksud bayang-bayang beralih satu piksel ke kanan dan ke bawah, bayang-bayang teks: -1px -1px 1px #666; dan bayang-bayang Beralih ke atas. text-shadow: 0px 0px 1px #666; bermakna tiada offset Pada masa ini, akan ada bayang-bayang yang sama di sekeliling, seperti yang ditunjukkan di bawah

Terdapat beberapa kategori bayang-bayang dalam css3

2. Berbilang. set nilai atribut Anda boleh menggunakan koma untuk memisahkan

text-shadow: 1px 1px 1px #666, -1px -1px 1px #666 bermakna terdapat bayang-bayang yang diimbangi oleh satu piksel di sekelilingnya.

Menggunakan atribut teks-bayang-bayang kita boleh mencipta kesan teks timbul yang indah. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #cccccc;
        }
        p{
            text-align: center;
            font-size: 60px;
            margin-top: 50px;
            font-weight: bold;
            color: #cccccc;
        }
        .tu{
            text-shadow: -1px -1px 1px #fff,1px 1px 1px #000;
        }
        .ao{
            text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000;
        }
    </style>
</head>
<body>
        <p>好好学习</p>
        <p>天天向上</p>
</body>
</html>

berjalan seperti berikut:

Terdapat beberapa kategori bayang-bayang dalam css3

2 > Atribut bayang-bayang kotak dan bayang-bayang teks adalah sangat serupa.

Enam nilai ​​bayang kotak adalah seperti berikut:

h-bayang Kedudukan bayang mendatar, nilainya boleh menjadi nombor negatif (tidak boleh ditinggalkan)

  • v-bayang Kedudukan bayang menegak, nilai boleh negatif (tidak boleh ditinggalkan)

  • kabur jarak kabur (pilihan)

  • jarak penyebaran bayang-bayang (pilihan)

  • warna warna bayang-bayang (pilihan)

  • Nota: Anda boleh menambah satu pada kotak atau berbilang warna. Atribut ini ialah senarai bayang-bayang yang dipisahkan koma Setiap bayang-bayang ditentukan oleh (2~4) nilai panjang, nilai warna pilihan dan kata kunci inset pilihan. Nilai untuk panjang yang ditinggalkan ialah 0.

    • Contoh: Tambahkan berbilang gaya bayang

  • Kesan berjalan

(Belajar perkongsian video:

tutorial video css

,

bahagian hadapan web

)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3边框阴影</title>
    <style>
    #box1{ 
                margin-top: 100px;
        margin-left:100px; 
        background-color: #fff;
        width: 100px;
        height: 100px;
             box-shadow:
        2px 2px 10px red,
        5px 5px 20px blue;
        }
        </style>
</head>
 <body>
    <div id="box1"></div>
</body>
</html>

Atas ialah kandungan terperinci Terdapat beberapa kategori bayang-bayang 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 sifat css3 yang disokong oleh ie9?Artikel seterusnya：Apakah sifat css3 yang disokong oleh ie9?

Artikel berkaitan

Lihat lagi