码迷,mamicode.com
首页 > Web开发 > 详细

css秘密花园一

时间:2019-06-05 22:06:18      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:12px   off   cal   flow   进度   origin   ack   tps   pac   

css秘密花园

  1.透明边框

<style>
    div{
      width: 120px;
      height: 60px;
      margin: 30px auto;
      background: pink;
      border: 10px solid hsla(0, 0%, 100%, .5)
    }
  </style>

<body>
  <main>
    <div></div>
  </main>
</body>
技术图片

  2.css多重边框

<style>
    div{
      width: 60px;
      height: 60px;
      margin: 50px auto;
      background: pink;
      border-radius: 50%;
      box-shadow: 0 0 0 10px #ccc,0 0 0 20px #777,
                  0 0 0 30px #ccc,0 0 0 40px #777;
    }
  </style>

<body>
  <main>
    <div></div>
  </main>
</body>
技术图片
<style>
    div{
      width: 120px;
      height: 60px;
      margin: 50px auto;
      background: pink;
      border: 10px solid #ccc;
      outline: 10px solid #ccc;
      outline-offset: -30px;
    }
  </style>

<body>
  <main>
    <div></div>
  </main>
</body

技术图片

   3.css内圆角

<style>
    div{
      width: 120px;
      height: 60px;
      margin: 50px auto;
      background: pink;
      border: 5px solid #cccccc;
      border-radius: 15px;
      outline: 5px solid #ccc;
      outline-offset: -5px;
    }
  </style>
<body>
  <main>
    <div></div>
  </main>
</body>
技术图片

 

 

 

<style>
    div{
      width: 120px;
      height: 60px;
      margin: 50px auto;
      background: pink;
      border-radius: 8px;
      outline: 5px solid #ccc;
      box-shadow: 0 0 0 3px #ccc;
    }
  </style>
<body>
  <main>
    <div></div>
  </main>
</body>
技术图片

   4.滚动的进度条

<style>
    main{
      width: 800px;
      height: 60px;
      margin: 50px auto;
    }
    .progress-bar{
      width: 100%;
      height: 12px;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }
    .progress-enter{
      height: inherit;
      background:pink;
      opacity: .5;
    }
    .progress-bg{
      width: 60%;
      height: inherit;
      border-radius: 6px;
      background: repeating-linear-gradient(-45deg,#d9cfbb 25%,#C3B393 0, #C3B393 50%,
                                          #D9CFBB 0, #D9CFBB 75%, #C3B393 0);
                                          /* 背景斑马条纹 */
      background-size: 16px 16px;
      animation: panoramic 20s linear infinite;
      /* animation 参数依次是 动画名称,一个动画周期持续事件 ,infinite代表循环播放 linear直线*/
    }
    @keyframes panoramic {
      to{
        background-position: 200% 0;
      }
    }
  </style>
<body>
  <main>
    <div class="progress-bar">
      <div class="progress-enter">
        <div class="progress-bg"></div>
      </div>
    </div>
  </main>
</body>
技术图片
会动的

   5.一像素横线 主要是手机端问题,有时候1px不是1px 

    使用box-show 配合transform: scale(.5) translateZ(0)

<style>
    main{
      width: 800px;
      height: 60px;
      margin: 50px auto;
      display: flex;
    }
    span{
      width: 100%;
      position: relative;
    }
    span::after{
      content: ‘‘;
      width: 100%;
      position: absolute;
      box-shadow: 0 0 0 1px #b4a078;
      transform-origin: 0 bottom;
      transform: scale(.5) translateZ(0);
    }
    @media (min-resolution: 2dppx){
      span::after{
        box-shadow: 0 0 0 .5px #b4a078;
      }
    }
    @media (min-resolution: 3dppx){
      span::after{
        box-shadow: 0 0 0 .3333px #b4a078;
      }
    }
  </style>

<body>
  <main>
    <span>

    </span>
  </main>
</body>
技术图片

参考地址 https://lhammer.cn/You-need-to-know-css/#/translucent-borders

css秘密花园一

标签:12px   off   cal   flow   进度   origin   ack   tps   pac   

原文地址:https://www.cnblogs.com/czkolve/p/10981723.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!