Rumah > Artikel > hujung hadapan web > Apakah kod untuk gaya bayangan dalam html

Apakah kod untuk gaya bayangan dalam html

青灯夜游asal: 2022-09-23 16:32:135111semak imbas

Kod gaya: 1. Gaya bayang teks "bayang teks: warna kabur bayang-v v-bayang;"; 2. Gaya bayang-bayang sempadan "bayang-bayang kotak: inset warna kabur bayang-bayang v ;"; 3. Gaya bayang-bayang gambar "penapis:drop-shadow(h-shadow v-shadow kabur warna hamparan);".

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

Dalam HTML, terdapat tiga cara untuk menambah gaya bayang pada elemen:

Bayang teks: gunakan atribut teks-bayang
Bayang sempadan: gunakan atribut bayang-kotak
Bayang-bayang gambar: gunakan atribut penapis (perlu digunakan dengan fungsi bayang-jatuh())

1. Gaya bayang teks

Dalam html, anda boleh menggunakan atribut teks-bayangan untuk melaksanakan teks berbayang atribut digunakan pada teks bayangan .

Sintaks

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

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

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
    </body> 
</html>

Rendering:

Apakah kod untuk gaya bayangan dalam html

2. Bayang Sempadan gaya

Dalam HTML, anda boleh menggunakan atribut box-shadow untuk melaksanakan sempadan dengan gaya bayang-bayang. Sifat bayang kotak boleh menetapkan satu atau lebih kotak bayang lungsur turun.

Tatabahasa

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

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

示例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 300px;
				height: 100px;
				background-color:red;
				-moz-box-shadow: 10px 10px 5px #888888;
				/* 老的 Firefox */
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>
	<body>

		<div>边框阴影</div>

	</body>
</html>

效果图：

Apakah kod untuk gaya bayangan dalam html

3、图片阴影样式

在html中，可使用filter属性来实现带阴影样式的边框。

filter 属性定义了元素(通常是 Apakah kod untuk gaya bayangan dalam html )的可视效果，当和drop-shadow()函数一起使用，可给图像设置一个阴影效果。

filter:drop-shadow(h-shadow v-shadow blur spread color);

阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。参数如下：

h-shadow v-shadow (必须)
这是设置阴影偏移量的两个值. 设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 and/or ，会有模糊效果).
(可选)
这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值若未设定，默认是0 (则阴影的边界很锐利).
(可选)
这是第四个值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器不支持第四个长度，如果加了也不会渲染。
(可选)
查看该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>

<p>给图像设置一个阴影效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">

</body>
</html>

Apakah kod untuk gaya bayangan dalam html

（学习视频分享：css视频教程）

Atas ialah kandungan terperinci Apakah kod untuk gaya bayangan dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 firefox css css3 html webkit Filter Length

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 watak komen baris tunggal html?Artikel seterusnya：Apakah watak komen baris tunggal html?

Artikel berkaitan

Lihat lagi