MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

CSS box-shadow与text-shadow打造阴影效果

2021-10-112.4k 阅读

CSS box-shadow属性

  1. 基本概念
    • box-shadow属性用于在元素的框架上添加阴影效果。它可以模拟出元素在页面上有立体的层次感，让页面元素更加生动。例如，在一个按钮上添加阴影，会让按钮看起来像是浮在页面之上。
    • 语法格式为：box-shadow: h-shadow v-shadow blur spread color inset;，其中各个参数含义如下：
      • h-shadow：必需。水平阴影的位置，允许负值。正值表示阴影在元素的右侧，负值表示阴影在元素的左侧。
      • v-shadow：必需。垂直阴影的位置，允许负值。正值表示阴影在元素的下方，负值表示阴影在元素的上方。
      • blur：可选。模糊距离。如果值为0，表示阴影没有模糊效果，阴影边缘清晰；值越大，阴影越模糊。
      • spread：可选。阴影的扩展半径。正值会使阴影扩大，负值会使阴影缩小。
      • color：可选。阴影的颜色。如果未指定，浏览器会使用默认颜色，但不同浏览器默认颜色可能不同，所以建议明确指定颜色。
      • inset：可选。将外部阴影（outset）改为内部阴影。默认是外部阴影。
  2. 简单示例
    • 以下是一个简单的box-shadow示例，为一个div元素添加阴影：
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            box-shadow: 5px 5px 10px gray;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • 在这个例子中，box-shadow: 5px 5px 10px gray;表示水平阴影位置在元素右侧5像素，垂直阴影位置在元素下方5像素，阴影模糊距离为10像素，阴影颜色为灰色。
  1. 阴影方向控制
    • 通过h-shadow和v-shadow的正负值可以灵活控制阴影的方向。
    • 顶部左侧阴影：
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .top - left - shadow {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
            box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class="top - left - shadow"></div>
</body>
</html>
  • 这里box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.5);实现了元素顶部左侧的阴影，水平和垂直阴影位置都为负。
  • 底部左侧阴影：
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .bottom - left - shadow {
            width: 200px;
            height: 100px;
            background-color: pink;
            box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class="bottom - left - shadow"></div>
</body>
</html>
  • 对于box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.5);，水平阴影位置为负在左侧，垂直阴影位置为正在底部。
  1. 模糊与扩展效果
    • 模糊效果：模糊距离blur决定了阴影边缘的柔和程度。
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .blur - example {
            width: 200px;
            height: 100px;
            background-color: yellow;
            box-shadow: 5px 5px 0 gray; /* 无模糊 */
        }
        .more - blur - example {
            width: 200px;
            height: 100px;
            background-color: yellow;
            box-shadow: 5px 5px 20px gray; /* 较大模糊 */
        }
    </style>
</head>
<body>
    <div class="blur - example">无模糊阴影</div>
    <div class="more - blur - example">较大模糊阴影</div>
</body>
</html>
  • 在上述代码中，box-shadow: 5px 5px 0 gray;阴影边缘清晰，而box-shadow: 5px 5px 20px gray;阴影更加模糊。
  • 扩展效果：扩展半径spread可以让阴影面积增大或减小。
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .spread - example {
            width: 200px;
            height: 100px;
            background-color: orange;
            box-shadow: 5px 5px 10px 5px gray; /* 扩展半径为5px */
        }
        .negative - spread - example {
            width: 200px;
            height: 100px;
            background-color: orange;
            box-shadow: 5px 5px 10px -5px gray; /* 扩展半径为 - 5px */
        }
    </style>
</head>
<body>
    <div class="spread - example">扩展阴影</div>
    <div class="negative - spread - example">收缩阴影</div>
</body>
</html>
  • box-shadow: 5px 5px 10px 5px gray;阴影向外扩展了5像素，而box-shadow: 5px 5px 10px -5px gray;阴影向内收缩了5像素。
  1. 内部阴影
    • 通过inset关键字可以将外部阴影转换为内部阴影。
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .inset - shadow {
            width: 200px;
            height: 100px;
            background-color: lightskyblue;
            box-shadow: inset 5px 5px 10px gray;
        }
    </style>
</head>
<body>
    <div class="inset - shadow"></div>
</body>
</html>
  • box-shadow: inset 5px 5px 10px gray;使得阴影出现在元素内部，像是元素内部被挖空了一块。
  1. 多重阴影
    • 可以通过逗号分隔多个box-shadow值来创建多重阴影效果。
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .multiple - shadows {
            width: 200px;
            height: 100px;
            background-color: lavender;
            box-shadow: 5px 5px 10px gray, -5px -5px 10px rgba(255, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class="multiple - shadows"></div>
</body>
</html>
  • 在这个例子中，box-shadow: 5px 5px 10px gray, -5px -5px 10px rgba(255, 0, 0, 0.5);同时添加了一个右下角的灰色阴影和一个左上角的红色半透明阴影。

CSS text-shadow属性

  1. 基本概念
    • text-shadow属性用于为文本添加阴影效果。它可以让文本在页面上更加突出，增加立体感和视觉吸引力。例如，在标题文本上添加阴影，可以让标题更醒目。
    • 语法格式为：text-shadow: h-shadow v-shadow blur color;，其中各参数含义如下：
      • h-shadow：必需。水平阴影的位置，允许负值。正值使阴影在文本右侧，负值使阴影在文本左侧。
      • v-shadow：必需。垂直阴影的位置，允许负值。正值使阴影在文本下方，负值使阴影在文本上方。
      • blur：可选。模糊距离。值越大，阴影越模糊。
      • color：可选。阴影的颜色。如果未指定，不同浏览器可能有不同的默认颜色，所以建议明确指定。
  2. 简单示例
    • 以下是为标题文本添加阴影的简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 {
            text-shadow: 2px 2px 4px gray;
        }
    </style>
</head>
<body>
    <h1>带阴影的标题</h1>
</body>
</html>
  • text-shadow: 2px 2px 4px gray;表示水平阴影在文本右侧2像素，垂直阴影在文本下方2像素，阴影模糊距离为4像素，阴影颜色为灰色。
  1. 阴影方向与位置
    • 如同box-shadow，通过h-shadow和v-shadow的正负值可以控制文本阴影的方向。
    • 顶部左侧文本阴影：
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h2 {
            text-shadow: -2px -2px 3px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <h2>顶部左侧阴影文本</h2>
</body>
</html>
  • 这里text-shadow: -2px -2px 3px rgba(0, 0, 0, 0.5);实现了文本顶部左侧的阴影。
  • 底部右侧文本阴影：
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h3 {
            text-shadow: 3px 3px 5px rgba(0, 128, 0, 0.7);
        }
    </style>
</head>
<body>
    <h3>底部右侧阴影文本</h3>
</body>
</html>
  • text-shadow: 3px 3px 5px rgba(0, 128, 0, 0.7);让阴影出现在文本底部右侧。
  1. 模糊效果
    • 模糊距离blur在text-shadow中同样影响阴影的柔和程度。
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h4 {
            text-shadow: 2px 2px 0 black; /* 无模糊 */
        }
        h5 {
            text-shadow: 2px 2px 10px black; /* 较大模糊 */
        }
    </style>
</head>
<body>
    <h4>无模糊阴影文本</h4>
    <h5>较大模糊阴影文本</h5>
</body>
</html>
  • text-shadow: 2px 2px 0 black;阴影边缘清晰，而text-shadow: 2px 2px 10px black;阴影更加模糊，使文本看起来更具朦胧感。
  1. 多重文本阴影
    • 与box-shadow类似，text-shadow也支持多重阴影，通过逗号分隔多个text-shadow值。
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h6 {
            text-shadow: 2px 2px 4px gray, -2px -2px 4px rgba(255, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <h6>多重阴影文本</h6>
</body>
</html>
  • text-shadow: 2px 2px 4px gray, -2px -2px 4px rgba(255, 0, 0, 0.5);为文本同时添加了一个右下角的灰色阴影和一个左上角的红色半透明阴影，使文本更加生动。
  1. 与字体颜色配合
    • text-shadow的颜色与文本本身的颜色相互配合，可以创造出独特的视觉效果。
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            color: white;
            text-shadow: 1px 1px 2px black;
        }
    </style>
</head>
<body>
    <p>白色文本搭配黑色阴影</p>
</body>
</html>
  • 在这个例子中，白色文本搭配黑色阴影，使文本在页面上更加清晰易读，且增加了立体感。

box-shadow与text-shadow的比较与结合使用

  1. 比较
    • 作用对象：
      • box-shadow作用于整个元素的框架，包括元素的内容、内边距和边框。它可以模拟元素在页面上的立体位置，如按钮、卡片等元素添加box-shadow后能呈现出浮在页面上的效果。
      • text-shadow仅作用于文本内容，用于突出文本，使其在页面上更醒目。比如标题或重要的文本段落添加text-shadow可以吸引用户的注意力。
    • 语法差异：
      • box-shadow语法更为复杂，多了一个spread参数用于控制阴影的扩展半径，并且还支持inset关键字来创建内部阴影。
      • text-shadow语法相对简单，没有spread和inset相关设置，主要围绕文本阴影的基本位置、模糊和颜色设置。
    • 视觉效果侧重点：
      • box-shadow更侧重于塑造元素整体的立体空间感，使元素与页面背景或其他元素产生层次感。
      • text-shadow重点在于增强文本的可读性和视觉吸引力，突出文本内容本身。
  2. 结合使用示例
    • 当需要一个既突出文本又有立体效果的按钮时，可以结合使用box-shadow和text-shadow。
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        button {
            width: 150px;
            height: 50px;
            background-color: lightcoral;
            border: none;
            box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
            text-shadow: 1px 1px 2px white;
            color: darkred;
        }
    </style>
</head>
<body>
    <button>点击我</button>
</body>
</html>
  • 在上述代码中，box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);为按钮添加了一个向外的、有一定模糊度的灰色阴影，使按钮看起来像是浮在页面上。text-shadow: 1px 1px 2px white;为按钮上的文本添加了白色阴影，让文本在按钮背景上更加突出，同时白色阴影与按钮的红色系背景形成对比，增加了视觉吸引力。
  1. 实际应用场景
    • 卡片式布局：在卡片式布局中，如文章卡片、产品卡片等。可以使用box-shadow为卡片整体添加阴影，模拟卡片浮在页面上的效果，同时对卡片标题使用text-shadow，突出标题文本。
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .card {
            width: 300px;
            height: 200px;
            background-color: white;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            padding: 10px;
        }
        .card h2 {
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="card">
        <h2>卡片标题</h2>
        <p>这里是卡片内容。</p>
    </div>
</body>
</html>
  • 导航栏：在导航栏中，对于导航项文本可以使用text-shadow增加立体感和可读性，对于整个导航栏容器可以使用box-shadow来与页面其他部分区分开，形成一个独立的模块。
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        nav {
            background-color: lightblue;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        nav ul li {
            display: inline;
            padding: 10px 20px;
        }
        nav ul li a {
            text-decoration: none;
            color: navy;
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </nav>
</body>
</html>
  • 在这个导航栏示例中，box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);为导航栏容器添加了一个底部阴影，使其与页面其他部分有明显区分。text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);为导航项文本添加了白色半透明阴影，在浅蓝色背景下突出了文本，同时增加了文本的立体感。

兼容性与优化

  1. 兼容性
    • box-shadow：box-shadow在现代浏览器中得到了广泛支持，但在一些较旧的浏览器（如IE9及以下）不支持。对于需要兼容旧浏览器的项目，可以考虑使用滤镜或JavaScript模拟阴影效果。例如，在IE浏览器中可以使用filter属性的progid:DXImageTransform.Microsoft.Shadow滤镜来模拟阴影效果，但这种方式有诸多限制，如不支持模糊效果等。
    • text-shadow：text-shadow同样在现代浏览器中有良好的支持，但IE9及以下版本不支持。在兼容性处理上与box-shadow类似，对于旧浏览器可以采用一些替代方案，如使用图片代替文本并在图片上添加阴影效果等。不过，这种方式可能会影响文本的可访问性和页面加载性能，需要权衡使用。
  2. 性能优化
    • 减少阴影数量：无论是box-shadow还是text-shadow，多重阴影会增加浏览器的渲染负担。尽量避免不必要的多重阴影，只在确实需要增强视觉效果的地方使用。例如，如果一个简单的阴影就能达到想要的效果，就不要使用多重阴影。
    • 合理设置模糊和扩展值：较大的模糊距离和扩展半径会增加渲染成本。尽量使用较小且合适的模糊和扩展值，既能达到想要的视觉效果，又不会对性能造成过大影响。例如，对于一些小元素，过度的模糊可能会使元素变得模糊不清，同时增加渲染时间，所以要根据元素的大小和用途合理设置这些值。
    • 硬件加速：在某些情况下，可以通过触发浏览器的硬件加速来提高阴影渲染性能。例如，为添加了box-shadow或text-shadow的元素设置transform: translateZ(0);或will-change: transform;。这会告诉浏览器提前准备好相关的渲染工作，利用GPU进行加速，但也要注意不要滥用，因为过度使用硬件加速可能会导致其他性能问题，如增加内存消耗等。

通过深入了解CSS box-shadow与text-shadow，前端开发者可以在网页设计中灵活运用这两个属性，为页面添加丰富的阴影效果，提升页面的视觉吸引力和用户体验，同时在兼容性和性能优化方面做好处理，确保页面在各种环境下都能高效且美观地呈现。