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秘密花园一的更多相关文章

  1. css秘密花园

    picture元素 http://www.w3cplus.com/responsive/responsive-images-101-part-6-picture-element.htmlCHAPTER ...

  2. 读书笔记 —— 《css秘密花园》

    浏览器兼容性有效性信息查询 : Can I Use? http://caniuse.com/ 自动为css添加浏览器厂商前缀 https://autoprefixer.github.io/ 在线编辑H ...

  3. CSS秘密花园：多边框

    今天在查询CSS3动画相关资料时偶然发现这个,感觉有时还是挺方便的.原文链接:http://www.w3cplus.com/css3/css-secrets/multiple-borders.html ...

  4. css特效 - 环形文字

    记一次群友问题和回答: 下面这种效果,文字是动态的,不能使用图片的情况下,前端怎么实现? 一.插件实现: arctext.js 教程地址:实现文字平滑弯曲弧形效果的插件-arctext.js 二.原生 ...

  5. 推荐一些关于学习Html Css和Js的书吗？

    前端易学易懂,随着移动互联网的日益兴起,it行业对于前端的需求也在不断的提高,那么从前端小白修炼成为前端大神的这个过程之中,一些必备的枕边书也是必不可少的. 第一本,入门<Head first ...

  6. CSS 标准发布流程

    随着 CSS 3 的广泛应用,很多新的 CSS 属性层出不穷,有很多陌生的 CSS 属性出现,所以经常需要去学习新的 CSS 属性.新的属性往往介绍文章不多,所以有时候就需要去看看官方文档,此时会发现 ...

  7. 移动端web开发的一些知识点

    整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...

  8. HTML - 毛玻璃 滤镜 模糊

    css 秘密花园 http://dabblet.com/gist/d9f243ddd7dbffa341a4 场景,背景图片 + 毛玻璃遮盖 原理:利用background的cover特性,将毛玻璃的区 ...

  9. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

随机推荐

  1. wordcloud：让你的词语像云朵一样美

    介绍   对文本中出现频率较高的关键词给予视觉化的显示 使用 python import jieba import codecs import wordcloud file = r"C:\U ...

  2. BZOJ 2281 Luogu P2490 [SDOI2011]黑白棋 (博弈论、DP计数)

    怎么SDOI2011和SDOI2019的两道题这么像啊..(虽然并不完全一样) 题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?i ...

  3. 大数据笔记（二十二）——大数据实时计算框架Storm

    一. 1.对比:离线计算和实时计算 离线计算:MapReduce,批量处理(Sqoop-->HDFS--> MR ---> HDFS) 实时计算:Storm和Spark Sparki ...

  4. 516D Drazil and Morning Exercise

    分析 求出直径和最远距离d 之后我们以直径中点为根 发现父亲的d肯定不小于儿子的d 于是从下往上启发式合并维护与子树根的值相差L内的个数即可 代码 #include<bits/stdc++.h& ...

  5. 2018-5 - 凉经 - 乐糖游戏 - PHP 开发实习生

    收到面试通知当天因为学校出事要求我明天必须回去,所以就买当晚的火车票,然后跟公司说学校有事明天没法去面试了,公司人事比较好给我安排到当天下午面试.公司规模不是很大,但位置好下了地铁到,可能因为招的是实 ...

  6. lua源码学习篇二：语法分析

    一步步调试,在lparser.c文件中luaY_parser函数是语法分析的重点函数,词法分析也是在这个过程中调用的.在这个过程中,用到一些数据结构,下面会详细说. Proto *luaY_parse ...

  7. Eclipse设置保存时自动格式化代码

    在使用eclipse时,经常需要使用到Ctrl+Shift+F来格式化代码,可以打开保存时格式化,会更方便. 打开方式:Window-->Preferences-->Java --> ...

  8. 移动端自动化==>AppiumApi接口详解

    Appium 初始化配置信息(Desired Capabilities) Desired Capabilities实际上就是一个字典,它主要用于向Appium Server提供初始化配置参数,如:想要 ...

  9. Mybatis-plus 思维导图，让 Mybatis-plus 不再难懂

    摘要: Mybatis-Plus(简称MP)是一个Mybatis的增强工具,在 Mybatis 的基础上只做增强不做改变,为简化开发.提高效率而生. mybatis-plus与mybatis myba ...

  10. SIRIM上海,http://www.sirim-global.com

    SIRIM上海 http://www.sirim-global.com