如何使用 CSS 在元素的一侧添加框阴影？

box-shadow 属性用于设置元素一侧的盒子阴影。

句法：

box-shadow: h-offset v-offset blur spread color;

盒子阴影值：

• h-offset：需要，用来设置阴影的水平位置。正值用于设置框右侧的阴影，负值用于设置框左侧的阴影。
• v-offset：必须，用于设置阴影的垂直位置。正值用于设置框下方的阴影，负值用于设置框上方的阴影。
• blur：它是一个可选属性，该属性的作用是模糊盒子的阴影。
• spread：用于设置阴影的大小。点差的大小取决于点差的值。
• color：可选属性，用于设置阴影的颜色。

示例 1：本示例设置盒子底部的盒子阴影。

 
 
  
 
     
      
    
    

  
 
    
GeeksForGeeks
 
 
  
                    

输出：

示例 2：本示例将 box-shadow 设置在 box 的左侧。

 
 
  
 
     
      
    
    

  
 
    
GeeksForGeeks
 
 
  
                    

输出：

inset：默认情况下，阴影在框外生成，但 inset 值可用于在框内创建阴影。

示例 3：此示例在框内创建阴影。

 
 
  
 
     
      
    
    

  
 
    
GeeksForGeeks
 
 
  
                    

输出：