Apakah maksud box-shadow dalam css3-Soal Jawab bahagian hadapan-php.cn

Jadual Kandungan

内阴影示例

3边内影示例

外阴影示例

右下外阴影示例

扩大阴影示例

半透明阴影色示例

Rumah

hujung hadapan web

Soal Jawab bahagian hadapan

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:

<!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:

<!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:

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

.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