CSS3_盒阴影_倒影_盒子大小可调

1. 盒阴影

会产生一个或者多个阴影

 

• 使用：    （多个阴影，以逗号隔开）

•                                       /* （不能为负值） （可以负值） */
           /* 水平方向偏移量    垂直反向偏移量    模糊程度    扩散程度                 颜色       是否是内阴影; */
  
  box-shadow:    20px             20px         20px       10px             yellowgreen;
  
                                                   /* 外阴影上下左右扩10px */
                                                   /* 不会影响布局，即不占位 */
  /* 内阴影在 content 之上 */
  box-shadow:    30px             40px         10px       50px                 red          inset;    
            /* 无论偏移量多大，始终在盒子内部     四周向内模糊   四周向内扩                         
                                                   /*     不影响文本内容 */

 

• 应用： 立体圆球（内阴影）

• #box {
      border-radius: 50%;
      box-shadow: -20px -20px 100 #000 inset;
  }

 

• 应用： " 影分身 "（多个阴影）

• #box {
      background-color: red;
      box-shadow: 0 20px 0 0 red, 0 60px 0 0 red, 0 100px 0 0 red;
  }

 

• 应用： 模糊盒子阴影

• #box {
      height: 0;    /* 1. width 或者 height 为 0 */
          
      /* 2. 通过扩展程度扩展阴影大小 */
      /* 3. 模糊程度足够大 */
      box-shadow: 0 0 30px 5px red;
  }

 

2. 倒影 -webkit-box-reflect

• img {
      margin: 200px 0 0 400px;
  
      width: 320px;
      height: 480px;
      
      background: ;
      
   /* -webkit-box-reflect: 方向      元素与倒影的距离    倒影效果（渐变）; */
      -webkit-box-reflect: left      10px          linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  
   // -webkit-box-reflect: right     10px         linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
      
   // -webkit-box-reflect: above     10px         linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  
   // -webkit-box-reflect: below     10px         linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  }

 

3. 盒子大小可调( resize: both;    overflow: auto )：

• #box {
      overflow: auto;    /* resize    必须配合 overflow 才会生效 */
      
      resize: horizontal;    /* 水平方向可调 */
      resize: vertical;    /* 垂直方向可调 */
      resize: both;    /* 两个方向可调 */
  }