cari

Rumah  >  Artikel  >  hujung hadapan web  >  Adakah css3 mempunyai kesan bayangan?

Adakah css3 mempunyai kesan bayangan?

WBOY
WBOYasal
2022-04-22 18:22:121496semak imbas

Terdapat kesan bayangan dalam CSS3: 1. Kesan bayangan teks, hanya gunakan atribut "bayang-teks", sintaksnya ialah "bayang-teks: mendatar dan menegak..." 2. Kesan kotak bayangan, Hanya gunakan atribut "bayang-kotak", sintaksnya ialah "bayang-kotak: mendatar dan menegak...".

Adakah css3 mempunyai kesan bayangan?

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

Adakah css3 mempunyai kesan bayang?

1 Atribut "text-shadow" mewakili bayang teks

Sintaks ialah

<.>
text-shadow:水平阴影 垂直阴影 模糊程度 颜色
Sifat teks-bayang-bayang menghubungkan satu atau lebih teks bayangan. Atribut ialah bayang-bayang, menyatakan setiap 2 atau 3 nilai panjang dan nilai warna pilihan yang dipisahkan dengan koma. Panjang tamat tempoh ialah 0.

Contohnya adalah seperti berikut: 

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
h1 {text-shadow:2px 2px #FF0000;}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
<p><b>注意:</b>IE 9及更早版本的浏览器不支持 text-shadow 属性.</p>
</body>
</html>
Hasil keluaran:


Adakah css3 mempunyai kesan bayangan?

2 "bayang-kotak" mewakili bayang-bayang kotak

Sintaksnya ialah 

box-shadow:水平阴影 垂直阴影 模糊距离 大小
Sifat boxShadow menambah satu atau lebih bayang lungsur ke dalam kotak. Sifat ini ialah senarai bayang-bayang yang dipisahkan koma, setiap satunya ditentukan oleh 2-4 nilai panjang, nilai warna pilihan dan kata kunci sisipan pilihan. Nilai untuk panjang yang ditinggalkan ialah 0.

Contoh adalah seperti berikut: 

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Hasil keluaran:

Adakah css3 mempunyai kesan bayangan?

(Belajar perkongsian video:

tutorial video css )

Atas ialah kandungan terperinci Adakah css3 mempunyai kesan bayangan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3
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：Bagaimana untuk mengosongkan jadual kecuali dua baris pertama dalam jqueryArtikel seterusnya：Bagaimana untuk mengosongkan jadual kecuali dua baris pertama dalam jquery

Artikel berkaitan

Lihat lagi