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. k8s安装报错 Error: unknown flag: --experimental-upload-certs

    今天安装k8sV1.16的版本时候,执行突然发现命令不对,之前安装V1.15的时候是可以的,可能是版本升级的原因. 解决: unknown flag: --experimental-upload-ce ...

  2. 使用ros_driver运行velodyne16线激光雷达

    一.使用ros_driver运行VLP16 推荐网址: http://blog.csdn.net/littlethunder/article/details/51920681 https://www. ...

  3. （53）LINUX应用编程和网络编程之八Linux网络基础

    3.8.1.网络通信概述 3.8.1.1.从进程间通信说起:网络域套接字socket,网络通信其实就是位于网络中不同主机上面的2个进程之间的通信. 3.8.1.2.网络通信的层次 (1)硬件部分:网卡 ...

  4. JMS学习三（ActiveMQ消息的可靠性）

    下面我们来学习一下消息接受确认和发送持久化消息.消息的过期.消息的选择器和消息的优先级. 一.消息接收确认 1.jms消息只有在被确认之后才认为成功消费了这条消息.消息的成功消费通常包括三个步骤:(1 ...

  5. springboot(六) Maven打包引入本地jar包

       springboot Maven打包引入本地jar包 最近在做项目的时候,有一些jar包不存在maven的依赖库中,所以需要自己引入本地jar包来达到需求,那么我们该如何去将本地的jar包引入s ...

  6. Oracle-执行./runInstaller报错，弹不出图形界面

    [root@Apexmic Packages]# xhost + 无论是root用户还是oracle用户均执行了xhost + 但还是报以下错误 [oracle@Apexmic database]$ ...

  7. 总结 webpack 的插件

    模块化第一步  初始化 package.json 文件 node.js 指令 npm init npm的官网:https://www.npmjs.com/ 搜索插件名,查看插件的用法 1. webpa ...

  8. 1、Shiro简介以及整体架构

    1.Shiro概念和作用: 利用shiro可以快速完成权限管理模块的开发 Spring的官网也是用Shiro做安全管理的... Shiro整体架构: 可能你感觉上面的图片很乱,但是你一定要先大体有个印 ...

  9. python是强类型还是弱类型语言

    几句话了解python特性 Python 是强类型的动态脚本语言 好多人对python到底是强语言类型还是弱语言类型存在误解,其实,是否是强类型语言只需要一句话就可以判别, 强类型:不允许不同类型相加 ...

  10. Spring bean的自动装配属性

    bean的自动装配属性能简化xml文件配置. bean 的自动装配属性分为四种: 1.byName 2.byTyoe 3.constructor 4. autodetect byName: 它查找配置 ...