使用 CSS3 添加阴影到图像

百变鹏仔 3个月前 (09-20) #CSS

文章标签阴影

要在 css3 中为图像添加投影，请使用滤镜属性的投影值。它具有以下值 -

h-shadow – 指定水平阴影的像素值。

v-shadow > – 指定垂直阴影的像素值。负值会将阴影置于图像上方。

模糊 – 为阴影添加模糊效果。

扩散 -正值使阴影扩大，负值使阴影缩小。

立即学习“前端免费学习笔记（深入）”；

颜色 – 向阴影添加颜色

示例

实时演示

<!DOCTYPE html><html><head><style>img.demo {   filter: brightness(120%);   filter: contrast(120%);   filter: drop-shadow(10px 10px 10px green);}</style></head><body><h1>Learn MySQL</h1><img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL"    style="max-width:90%"  style="max-width:90%"><h1>Learn MySQL</h1><img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL"    style="max-width:90%"  style="max-width:90%"></body></html>

输出

文章推荐

使用 CSS3 添加阴影到图像

示例

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写