masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > CSS3的text-shadow字体阴影怎么使用

CSS3的text-shadow字体阴影怎么使用

php中世界最好的语言
Lepaskan： 2017-11-24 09:27:30
asal
2200 orang telah melayarinya

CSS3的text-shadow样式是设置文阴影效果，原本在CSS2中就有这个属性，在CSS3中的文字阴影再次贝应用，那么我们就来看一下需要如何使用text-shadow。

CSS3单词：

text-shadow

语法结构

div{text-shadow:5px 2px 6px #000;} 

设置div盒子里文字阴影效果距离左5px和距离上2px开始显示阴影效果，同时阴影大小范围为6px，阴影颜色为黑色（#000）。

文字显示阴影效果共4个值，第一个代表距离左多少距离开始显示阴影效果，第二个值代表距离上多少距离开始显示阴影效果，第三个值代表阴影范围大小，第四个值为阴影效果颜色。

案例HTML代码

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>字体阴影 在线演示</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div>我阴影文字</div> 
<div class="txt">文字阴影测试内容1</div> 
<div class="txt2">文字阴影测试内容2</div> 
</body> 
</html>
Salin selepas log masuk

对应CSS代码：

.txt {text-shadow:5px 1px 6px #F93 }  
.txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC}
Salin selepas log masuk

以上就是CSS3的text-shadow使用方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

怎样隐藏溢出DIV的内容

CSS布局有哪些技巧

CSS里字体样式怎么设置

Atas ialah kandungan terperinci CSS3的text-shadow字体阴影怎么使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css3 text-shadow
sumber：php.cn
Artikel sebelumnya：CSS3的box-shadow怎么使用 Artikel seterusnya：属性选择器和伪类选择器的使用方法
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
Artikel terbaru oleh pengarang
Isu terkini
MySQL: "Pilih teks daripada... sebagai <variable here or subquery>" Saya mempunyai jadual berikut dengan data berikut: id text language 1 german text german 2...
daripada 2024-04-06 19:25:54
0
2
529
Tidak dapat mendapatkan elemen input daripada tapak web Jadi saya cuba mendapatkan elemen input daripada Twitter tetapi apabila saya menjalankanny...
daripada 2024-04-06 18:59:57
0
1
442
Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
daripada 2024-04-06 15:35:24
0
1
274
Jajarkan petua alat kepada induk relatif Saya menghabiskan dua hari cuba memikirkan perkara ini tetapi saya sedar saya tidak boleh ...
daripada 2024-04-06 13:16:59
0
2
394
Paparkan elemen selepas baris baharu blok Pada masa ini saya mempunyai ini: Saya mahu meletakkan div ikon pada penghujung teks, teta...
daripada 2024-04-04 21:45:21
0
1
271
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan