zoukankan      html  css  js  c++  java
  • 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;    /* 两个方向可调 */
      }

     

    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    结合使用allure当中的方法 让用例执行结果内 显示详细描述信息
    pytest-repeat插件,指定用例重复运行、重复运行次数
    pytest-xdist 分布式执行用例
    token
    使用pytest-ordering 来自定义用例执行顺序
    用例编写规则、命令行执行用例、用例执行的先后顺序
    python 中的doctest单元测试框架
    pytest 对用例mark标记分类(且用例也可按照分类来执行)
    学习webpack基本配置(一)
    (剑指offer)数组中出现次数超过一半的数字
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/9938498.html
Copyright © 2011-2022 走看看