Rumah >hujung hadapan web >tutorial css >css怎么实现阴影效果
css怎么实现阴影效果
- 青灯夜游asal
- 2021-04-29 17:46:3426427semak imbas
css实现阴影效果的方法：1、使用text-shadow属性，可以设置带阴影的文本，实现文字阴影效果；2、使用box-shadow属性，可以将阴影应用于文本框，实现边框阴影效果。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
方法1：使用text-shadow属性实现文字阴影效果
text-shadow属性用于设置带阴影的文本；可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置文本阴影效果</title>
<style>
h1 {
color: red;
text-shadow: 3px 5px 5px #656B79;
}
</style>
</head>
<body>
<h1>文本阴影！</h1>
</body>
</html>
方法2：使用box-shadow属性实现边框阴影效果
box-shadow属性可以将阴影应用于文本框，可设置中阴影的像素长度，宽度和模糊的距离以及阴影的颜色。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置边框阴影效果</title>
<style>
div{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div>边框阴影！</div>
</body>
</html>效果图：
（学习视频分享：css视频教程）
Atas ialah kandungan terperinci css怎么实现阴影效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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：css3中渐变属性有哪些Artikel seterusnya：css如何选取第几个元素