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. sh_04_累加求和

    sh_04_累加求和 # 计算 0 ~ 100 之间所有数字的累计求和结果 # 0. 定义最终结果的变量 result = 0 # 1. 定义一个整数的变量记录循环的次数 i = 0 # 2. 开始循 ...

  2. Python常用的库简单介绍一下

    Python常用的库简单介绍一下fuzzywuzzy ,字符串模糊匹配. esmre ,正则表达式的加速器. colorama 主要用来给文本添加各种颜色,并且非常简单易用. Prettytable ...

  3. 聊聊 Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的

    todo defineProperty() 参考: https://www.cnblogs.com/wangjiachen666/p/9883916.html

  4. [BZOJ2839]:集合计数（组合数学+容斥）

    题目传送门 题目描述 .(是质数喔~) 输入格式 一行两个整数N,K. 输出格式 一行为答案. 样例 样例输入: 3 2 样例输出: 样例说明 假设原集合为{A,B,C} 则满足条件的方案为:{AB, ...

  5. 配置Nginx和Apache允许指定域名CORS跨域访问

    前后端分离开发,导致前端项目需要跨域请求后端接口,解决方法有很多,本文只介绍两个: 1. 修改后端程序代码实现允许跨域请求 2. 修改服务器配置文件实现允许跨域请求 正文: 方法1:修改后端程序代码实 ...

  6. ffplay播放PCM裸流

    ffplay -f s16le -ar 48000 -ac 2 d:\lei.pcm

  7. CentOS7 下 Zabbix3.4 源码安装

    zabbix系统基于PHP环境运行,所以前提是系统上有PHP的运行环境,lnmp或者lamp环境 lnmp环境安装:http://www.cnblogs.com/rnckty/p/7642034.ht ...

  8. python - 代码调试的好帮手sys._getframe()

    python 的调试,令人非常忧伤,通过将输出路径打印的方式,可以提高很大的方便性: import sys #coding=utf-8 def get_cur_info(): print sys._g ...

  9. Jmeter接口测试系列之测试用例变量参数化处理

    在进行接口测试时,一组完整的接口测试用例,存在后一个测试用例使用前一个用例的请求结果中的数据,此时就需要参数化测试用例中值.直接使用变量调用会存在问题,此时就需要用到beanshell去改变. 举例说 ...

  10. Java连接Hive使用Zookeeper的方式

    Java连接Hive的方式就是通过JDBC的方式来连接,URL为jdbc:hive2://host:port/db;principal=X@BIGDATA.COM等,这种方式是直接连接HiveServ ...