Terdapat beberapa kategori bayang-bayang dalam css3-Soal Jawab bahagian hadapan-php.cn

Terdapat beberapa kategori bayang-bayang dalam css3

青灯夜游

Lepaskan： 2022-03-18 17:51:55

asal

2701 orang telah melayarinya

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>

Salin selepas log masuk

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.
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>

Salin selepas log masuk

Atas ialah kandungan terperinci Terdapat beberapa kategori bayang-bayang dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!