CSS中添加阴影的方法有哪些-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

在CSS中添加阴影的方法有三种，box-shadow、drop-shadow以及text-shadow，box-shadow添加阴影最简单，drop-shadow可以根据图像大小添加阴影，text-shadow为文字添加阴影，下面我们就来看看这三种阴影添加的方法。

CSS

使用box-shadow添加阴影

使用CSS添加阴影时，box-shadow是最常用的方法。

1	`box-shadow: 水平阴影垂直阴影模糊距离阴影的大小阴影的颜色;`

水平位置和垂直位置指定阴影显示的位置

根据正值和负值，位置将如下变化。

水平位置：正值：右，负值：左
垂直位置：正值：底部，负值：上部

阴影的模糊距离和阴影的范围是决定阴影外观的数值。

所有数值单位都是px。

我们来看具体的示例

代码如下

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  
    <link rel="stylesheet" href="sample.css" />
  </head>
  
  <body>
  
    <img src="img/girl.jpg" class="sample-box-shadow" >
  
  </body>
</html>

CSS

.sample-box-shadow{
   box-shadow: 10px 10px 15px -10px;
}

运行效果如下

CSS

通过以上这种方式，可以轻松地为图像添加阴影。

如何使用drop-shadow根据图像大小添加阴影？

1	`filter: drop-shadow(左右的阴影上下的阴影模糊距离阴影颜色);`

左右位置以及上下位置是指定原始图像的阴影位置的数字。

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » CSS中添加阴影的方法有哪些

CSS中添加阴影的方法有哪些

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论