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;    /* 兩個方向可調 */
  }