如何使用 CSS 设置插入阴影？

在 CSS 中， box-shadow属性在元素的框架周围添加阴影效果。我们可以围绕用逗号分隔的元素设置多个效果。 box-shadow被定义为元素的 X 和 Y 相对偏移值、模糊和扩散半径以及颜色。

在本文中，我们将学习如何使用 CSS 设置插入阴影。 Inset 属性将外部阴影更改为内部阴影。

注意：默认情况下，阴影生成在框外，但通过使用inset，我们可以在框内创建阴影。

句法：

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

方法：要为元素提供插入阴影，我们将使用box-shadow属性。在box-shadow属性中，我们将定义h-offset值(对于水平阴影效果是必需的)，然后是 v-offset 值(对于垂直阴影效果是必需的)。

我们还可以提供模糊效果并使用模糊和扩散值来扩散阴影。最后，我们将使用inset关键字来改变框架内的阴影。

示例 1：

HTML

  

    

  

  
    
Box-shadow: 5px 10px inset:
    

Welcome to GeeksforGeeks
    

  

输出：

说明：在上面的例子中，我们设置了h-offset值为 5px，v-offset 值为 10px，颜色为绿色。

示例 2：

HTML

  

    

  

  
    
box-shadow: 5px 10px 20px 5px Green inset:
    

  
        
Inset, Green, Spread and Blur.
  
    
  

  

输出：

说明：在上面的例子中，我们设置了h-offset值为 5px，v-offset 值为 10px ，blur 值为 20px，spread 值为 5px，颜色为绿色。

浏览器支持

Browser	Version
Chrome	10.0 4.0 -webkit-
Internet Explorer	9.0
Firefox	4.0 3.5 -moz-
Safari	5.1 3.1 -webkit-
Opera	10.5