CSS3之------box-shadow属性使用方法（1），即单边阴影效果设置

最新推荐文章于 2025-06-06 15:01:27 发布

转载最新推荐文章于 2025-06-06 15:01:27 发布 · 5.2k 阅读

前端同时被 2 个专栏收录

30 篇文章

订阅专栏

css

8 篇文章

订阅专栏

本文详细介绍了CSS3中的box-shadow属性，包括如何创建单边阴影效果，并提供了具体的示例代码。通过调整阴影的模糊半径和扩展半径，实现了不同需求下的阴影效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《图解CSS3：核心技术与案例实战》第3章CSS3边框，本章主要介绍CSS3新增的边框特性，首先从CSS的border属性着手切入，分别介绍了CSS3新增边框特性，border-color、border-image、border-radius以及box-shadow。详细介绍了每个特性的语法规则，并且结合一些简单的案例，以图解的方式介绍了这些特性的具体使用方法以及在IE下相应的兼容和处理方式。本节为大家介绍box-shadow属性使用方法。

作者：大漠来源：机械工业出版社| 2014-07-02 17:16

移动端

3.5.2　box-shadow属性使用方法（1）

和PSD软件制作图片相比，box-shadow修改元素的阴影效果要方便得多，因为box-shadow可以修改六个参数，得到不同的效果。下面结合一些简单的案例来对box-shadow属性进行演示说明。

1．单边阴影效果

定义元素的单边阴影效果和调协border的单边边框颜色是相似的，例如：

  > 
<html lang="en-US"> 
<head> 
  <meta charset="UTF-8"> 
  <title>box-shadow设置单边阴影效果title> 
  <style type="text/css"> 
    .box-shadow {  
      width: 200px;  
      height: 100px;  
      border-radius: 5px;  
      border: 1px solid #ccc;  
      margin: 20px;  
    }  
    .top {  
      box-shadow: 0 -2px 0 red;  
    }  
    .right {  
      box-shadow: 2px 0 0 green;  
    }  
    .bottom {  
      box-shadow: 0 2px 0 blue;  
    }  
    .left {  
      box-shadow: -2px 0 0 orange;  
    }  
  style> 
head> 
<body> 
  <div class="box-shadow top">div> 
  <div class="box-shadow right">div> 
  <div class="box-shadow bottom">div> 
  <div class="box-shadow left">div> 
body> 
html>

效果如图3-38所示。

这个案例中，使用box-shadow给元素设置了顶边、右边、底边和左边的单边阴影效果。主要通过box-shadow的水平和垂直阴影的偏移量来实现，其中x-offset为正值时，生成右边阴影，反之为负值时，生成左边阴影；y-offset为正值时，生成底部阴影，反之为负值时生成顶部阴影。此例中是一个单边实影投影效果（阴影模糊半径为0），但是如果阴影的模糊半径不是0，上面的方法还能不能实现单边阴影效果呢？不急着来回答，在上面的实例中添加一个模糊半径，例如：

  .top {  
      box-shadow: 0 -2px 5px red;  
    }  
    .right {  
      box-shadow: 2px 0 5px green;  
    }  
    .bottom {  
      box-shadow: 0 2px 5px blue;  
    }  
    .left {  
      box-shadow: -2px 0 5px orange;  
    }

图3-39说明，这个效果并不是理想的单边阴影效果，当box-shadow添加了5px阴影模糊半径后，阴影不再是实影投影，阴影清晰度向外扩散，更具阴影的效果。但造成了另一个问题，给元素其他三个边加上淡淡的阴影效果，可这并不是设计需要的效果。

那究竟要怎么做呢？此时，box-shadow属性中的阴影扩展半径（spread-radius）会是一个很关键的属性，要实现单边阴影效果，必须配上这个属性（除单边实影之外）。

  .top {  
      box-shadow: 0 -4px 5px -3px red;  
    }  
    .right {  
      box-shadow: 4px 0 5px -3px green;  
    }  
    .bottom {  
      box-shadow: 0 4px 5px -3px blue;  
    }  
    .left {  
      box-shadow: -4px 0 5px -3px orange;  
    }