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. 花式求LCA

    设树上有两点x.y,要求他们的lca(最近公共祖先) 1.倍增求LCA: 先预处理出树上每个点的向上2^k的祖先. 再看x.y:先把深度深的倍增跳到和深度浅的一样的深度,判断是否在同一点:是,该点即为 ...

  2. SSM整合之---环境搭建

    SSM整合---环境搭建 l  查询所有用户的信息,保存用户信息 1.pom.xml配置项目所需的jar包 <dependencies> <dependency> <gr ...

  3. codeforces#403—B题（二分，三分）

    B. The Meeting Place Cannot Be Changed time limit per test 5 seconds memory limit per test 256 megab ...

  4. vue 自己写的一个日历

    样式: //quanbu全部代码 <template> <div class="priceListContent clearfix"> <!-- 顶部 ...

  5. SQL 2008建一个job

    原文地址:http://blog.csdn.net/htl258/article/details/5543694 --  Author : htl258(Tony)--  Date   : 2010- ...

  6. [torch] pytorch hook学习

    pytorch hook学习 register_hook import torch x = torch.Tensor([0,1,2,3]).requires_grad_() y = torch.Ten ...

  7. 省市区，级联查询，ajaxgird,ajaxfrom

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  8. office toolkit怎么用（以激活office professional 2013为例）

    第一步:双击打开office toolkit工具,并选择office按钮(激活windows10选择windows按钮) 第二步:选择相应的office版本,我电脑安装的是Microsoft Offi ...

  9. zay大爷的神仙题目 D1T1-大美江湖

    在前几天的时候,千古神犇zay(吊打zhx那个)出了一套神仙题目,所以我得来分析分析QWQ 先补个网易云链接QWQ 毕竟是T1嘛,还算是比较简单的,那道题,读完题目就发现是个中等模拟(猪国杀算大模拟的 ...

  10. docker常用软件安装及使用

    linux安装docker: sudo wget -qO- https://get.docker.com | sh 启动docker: service docker start 搜索镜像: docke ...