CSS box-shadow



CSS box-shadow

CSS box-shadow用于在元素框架周围添加类似阴影的效果。
语法
 box-shadow: h-offset v-offset blur spread color |inset|inherit|initial|none;

让我们了解属性值。
h-offset:水平设置阴影位置。其正值会将阴影设置在框的右侧。其负值用于设置框左侧的阴影。
v-offset:与h-offset不同,它用于垂直设置阴影位置。其中的正值设置框下方的阴影,负值设置框上方的阴影。
blur:顾名思义,它用于模糊盒子阴影。此属性是可选的。
spread:设置阴影大小。点差大小取决于点差值。
color:顾名思义,此属性用于设置阴影的颜色。它是一个可选属性。
inset:通常,阴影在框的外部生成,但是通过使用插图,可以在框内创建阴影。
initial::用于将盒子阴影的属性设置为其默认值。
inherit:它是从其父继承。
none:这是默认值,不包含任何阴影属性。
让我们通过一些插图来理解它。

示例-简单阴影

 <!DOCTYPE html> 
<html>
    <head>
        <title>CSS box-shadow Property</title>
 
        <style>
            div
            {
            border: 1px solid;
            padding: 10px;
            }
            #hvb
            {
                /* box-shadow: h-offset v-offset blur */
                box-shadow: 5px 10px 10px;
            }
            #spr
            {
                /* box-shadow: h-offset v-offset blur spread */
                box-shadow: 5px 10px 10px 10px;
            }
            #col
            {
               /* box-shadow: h-offset v-offset blur spread color */
                box-shadow: 5px 10px 10px 10px orange;
            }
            #ins
            {
                  /* box-shadow: h-offset v-offset blur spread color inset */
                box-shadow: 5px 10px 10px 10px orange inset;
            }
            #init
            {
                  /* box-shadow: initial */
               box-shadow: initial;
 
            }
            #non
            {
                /* box-shadow: none */
                box-shadow: none;
            }
        </style>
    </head>
 
    <body>
        <div id = "hvb">
            <h1>It is a shadow box that has h-offset, v-offset and blur attributes.</h1>
       </div>
<br><br>
        <div id = "spr">
            <h1>It is a box that includes the spread attribute.</h1>
        </div>
<br><br>
        <div id = "col">
        <h1>It is a box that includes the color attribute.</h1>
     </div>
<br><br>
     <div id = "ins">
      <h1>It is a box that includes the inset attribute.</h1>
   </div>
<br><br>
   <div id = "init">
      <h1>It is a box that includes the initial attribute.</h1>
   </div>
<br><br>
   <div id = "non">
      <h1>It is a box that includes the default attribute i.e. none.</h1>
  </div>
    </body>
</html>

输出:

CSS box-shadow_https://bianchenghao6.com_【CSS 教程】_第1张