CSS 中的阴影结果主要通过 box-shadow 和 text-shadow 实现。它们分别用于为元素的边框和文字添加阴影结果。以下是它们的具体用法和示例：
1. box-shadow：元素阴影
box-shadow 用于为块级元素添加阴影，支持多种参数控制阴影的样式。
语法
- box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩展半径] [颜色];
- 程度偏移（必选）：阴影在程度方向的位移（正值向右，负值向左）。
- 垂直偏移（必选）：阴影在垂直方向的位移（正值向下，负值向上）。
- 含糊半径（可选）：控制阴影的含糊程度（值越大越含糊，默以为 0）。
- 扩展半径（可选）：控制阴影的扩展范围（正值扩展，负值紧缩）。
- 颜色（可选）：阴影的颜色（支持任何有效的颜色值，如 rgba、# 等）。
示例
- /* 基本阴影 */
- div {
- box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
- }
- /* 内阴影 */
- div {
- box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
- }
- /* 多重阴影 */
- div {
- box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.8);
- }
text-shadow 用于为文字添加阴影结果，语法与 box-shadow 雷同，但没有扩展半径参数。
语法
- text-shadow: [水平偏移] [垂直偏移] [模糊半径] [颜色];
- 程度偏移：阴影在程度方向的位移。
- 垂直偏移：阴影在垂直方向的位移。
- 含糊半径（可选）：控制阴影的含糊程度。
- 颜色（可选）：阴影的颜色。
示例
- /* 基本文字阴影 */
- h1 {
- text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
- }
- /* 多重文字阴影 */
- h1 {
- text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 255, 255, 0.8);
- }
- /* 霓虹灯效果 */
- h1 {
- text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
- }
filter: drop-shadow() 是 CSS 中的一种高级阴影结果，与 box-shadow 雷同，但有更机动的应用场景。它主要用于为元素（尤其是图像或透明背景元素）添加阴影结果，并能跟随元素的轮廓形状，而不仅限于矩形边框。
drop-shadow 的语法
- filter: drop-shadow(offset-x offset-y blur-radius color);
- offset-x：阴影的程度偏移量（正值向右，负值向左）。
- offset-y：阴影的垂直偏移量（正值向下，负值向上）。
- blur-radius：含糊半径（可选，默认值为 0，值越大越含糊）。
- color：阴影颜色（可选，默认是元素的文本颜色）。
示例解析：filter: drop-shadow(0 0 10px #fff)
- 0 0：阴影没有程度或垂直偏移。
- 10px：含糊半径为 10 像素，阴影边沿柔和。
- #fff：阴影颜色为白色。
该结果通常用于创建发光结果，尤其适用于深色背景或必要突出显示的元素。
发光按钮
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Drop Shadow Example</title>
- <style>
- button {
- padding: 10px 20px;
- font-size: 18px;
- color: #fff;
- background-color: #000;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- filter: drop-shadow(0 0 10px #fff);
- transition: filter 0.3s ease;
- }
- button:hover {
- filter: drop-shadow(0 0 20px #00f);
- }
- </style>
- </head>
- <body style="background-color: #333; display: flex; justify-content: center; align-items: center; height: 100vh;">
- <button>Glow Button</button>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Drop Shadow Image</title>
- <style>
- img {
- width: 200px;
- filter: drop-shadow(0 0 15px #fff);
- transition: filter 0.3s ease;
- }
- img:hover {
- filter: drop-shadow(0 0 30px #0ff);
- }
- </style>
- </head>
- <body style="background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh;">
- <img src="https://via.placeholder.com/200" alt="Glowing Image">
- </body>
- </html>
- 透明地区支持：drop-shadow 会考虑元素的透明部门，而 box-shadow 不会。
- 性能影响：filter 属性大概会对性能有轻微影响，尤其是在动画中频仍使用时。
- 浏览器兼容性：drop-shadow 在当代浏览器（如 Chrome、Firefox、Edge、Safari）中支持良好，但在 IE 中不支持。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
