Jadual Kandungan
内阴影示例
3边内影示例
外阴影示例
右下外阴影示例
扩大阴影示例
半透明阴影色示例
Rumah hujung hadapan web Soal Jawab bahagian hadapan Apakah maksud box-shadow dalam css3

Apakah maksud box-shadow dalam css3

Feb 28, 2022 pm 04:50 PM
box-shadow css3

Dalam CSS3, "box-shadow" bermaksud "box shadow", iaitu atribut baharu yang menambah bayang sempadan pada elemen; : bayang mendatar bayang menegak kabur jarak saiz inset warna;".

Apakah maksud box-shadow dalam css3

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

Apakah maksud box-shadow dalam css3

Dalam CSS3, "box-shadow" bermaksud "box shadow", iaitu atribut baharu yang menambah bayang sempadan pada elemen.

Apakah maksud box-shadow dalam css3

Sifat bayang kotak menambah satu atau lebih bayang pada kotak.

Nota: Gunakan atribut imej sempadan-* untuk membina butang boleh skala yang cantik!

Sintaks:

1

box-shadow: h-shadow v-shadow blur spread color inset;

Salin selepas log masuk

bayang-kotak Menambah satu atau lebih bayang-bayang pada kotak. Sifat ini ialah senarai bayang-bayang yang dipisahkan koma, setiap bayang-bayang ditentukan oleh nilai panjang 2-4, nilai warna pilihan dan kata kunci sisipan pilihan. Nilai untuk panjang yang ditinggalkan ialah 0.

  • h-bayang diperlukan. Kedudukan bayang mendatar. Nilai negatif dibenarkan.

  • v-shadow Diperlukan. Kedudukan bayang menegak. Nilai negatif dibenarkan.

  • kabur Pilihan. Jarak kabur.

  • sebarkan Pilihan. Saiz bayang.

  • warna Pilihan. Warna bayang. Lihat nilai warna CSS.

  • inset Pilihan. Tukar bayang luar (permulaan) kepada bayang dalam.

Berikut adalah beberapa ujian kecil yang saya lakukan untuk semua orang:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

div

{

    width:300px;

    height:100px;

    background-color:yellow;

    box-shadow: 10px 10px 5px #888888;

}

</style>

</head>

<body>

 

<div></div>

 

</body>

</html>

Salin selepas log masuk

Keputusan berjalan:
Apakah maksud box-shadow dalam css3

Antaranya kami Juga berjalan melalui cara membuat foto "polaroid" dan memutar imej. Contohnya:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

body

{

    margin:30px;

    background-color:#E9E9E9;

}

 

div.polaroid

{

    width:294px;

    padding:10px 10px 20px 10px;

    border:1px solid #BFBFBF;

    background-color:white;

    /* Add box-shadow */

    box-shadow:2px 2px 3px #aaaaaa;

}

 

div.rotate_left

{

    float:left;

    -ms-transform:rotate(7deg); /* IE 9 */

    -webkit-transform:rotate(7deg); /* Safari and Chrome */

    transform:rotate(7deg);

}

 

div.rotate_right

{

    float:left;

    -ms-transform:rotate(-8deg); /* IE 9 */

    -webkit-transform:rotate(-8deg); /* Safari and Chrome */

    transform:rotate(-8deg);

}

</style>

</head>

<body>

 

<div class="polaroid rotate_left">

<img src="/static/imghw/default1.png"  data-src="pulpitrock.jpg"  class="lazy"   alt=""    style="max-width:90%"  style="max-width:90%">

<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>

</div>

 

<div class="polaroid rotate_right">

<img src="/static/imghw/default1.png"  data-src="cinqueterre.jpg"  class="lazy"   alt=""    style="max-width:90%"  style="max-width:90%">

<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>

</div>

 

 

</body>

</html>

Salin selepas log masuk

Hasil larian adalah seperti berikut:

Apakah maksud box-shadow dalam css3

· Terdapat pelbagai jenis bayang-bayang kotak, seperti: bayang-bayang dalam , bayang luar, bayang tiga segi , bayang dua muka, bayang satu sisi, lejang barat...,

bermaksud:

Apakah maksud box-shadow dalam css3 Contohnya:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<div class="flex">

  <div class="flex-item">

    <h3 id="内阴影示例">内阴影示例</h3>

    <div class="box boxshadow1"></div>

  </div>

  <div class="flex-item">

    <h3 id="边内影示例">3边内影示例</h3>

    <div class="box boxshadow2"></div>

  </div>

  <div class="flex-item">

    <h3 id="外阴影示例">外阴影示例</h3>

    <div class="box boxshadow3"></div>

  </div>

  <div class="flex-item">

    <h3 id="右下外阴影示例">右下外阴影示例</h3>

    <div class="box boxshadow4"></div>

  </div>

  <div class="flex-item">

    <h3 id="扩大阴影示例">扩大阴影示例</h3>

    <div class="box boxshadow5"></div>

  </div>

  <div class="flex-item">

    <h3 id="半透明阴影色示例">半透明阴影色示例</h3>

    <div class="box boxshadow6"></div>

  </div>

</div>

Salin selepas log masuk

css:

1

2

3

4

5

6

7

8

9

10

.flex{display:flex;flex-wrap:wrap;}

.flex-item{margin-right:30px;}

 

.box {  background-color: #CCCCCC; border-radius:10px; width: 200px; height: 200px;  }

.boxshadow1{ box-shadow:inset 0px 0px 5px 1px #000; }

.boxshadow2{ box-shadow:inset 0 1px 2px 1px #000; }

.boxshadow3{box-shadow:0 0 10px #000;}

.boxshadow4{box-shadow:2px 2px 5px #000;}

.boxshadow5{box-shadow:0 0 5px 15px #000;}

.boxshadow6{box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);}

Salin selepas log masuk

Hasil berjalan:

Apakah maksud box-shadow dalam css3

(Mempelajari perkongsian video: tutorial video css , Tutorial pengenalan bahagian hadapan web)

Atas ialah kandungan terperinci Apakah maksud box-shadow dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
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

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Jun 28, 2022 pm 01:39 PM

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Jul 19, 2022 am 11:28 AM

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Jun 01, 2022 pm 07:15 PM

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Jun 10, 2022 pm 01:00 PM

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!

Bagaimana untuk melaksanakan sempadan renda dalam css3 Bagaimana untuk melaksanakan sempadan renda dalam css3 Sep 16, 2022 pm 07:11 PM

Bagaimana untuk melaksanakan sempadan renda dalam css3

css3 apakah itu susun atur penyesuaian css3 apakah itu susun atur penyesuaian Jun 02, 2022 pm 12:05 PM

css3 apakah itu susun atur penyesuaian

Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3 Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3 Apr 25, 2022 pm 04:52 PM

Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3

Adakah kesan animasi css3 mempunyai ubah bentuk? Adakah kesan animasi css3 mempunyai ubah bentuk? Apr 28, 2022 pm 02:20 PM

Adakah kesan animasi css3 mempunyai ubah bentuk?

See all articles