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. Sparrow 开发板化身电脑音量调节器

    前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 之前的新浪不能用啦,这次部分图片用的sm.ms的图床,加载慢,请耐心,准备换图床. 1.开箱简介 来填坑了!这次是 Sparrow ...

  2. Shoi2017试题泛做

    一口气做完六个省的省选(误) Day1 [Shoi2017]期末考试 枚举最大的天数,然后代价贪心地O(1)计算. #include <cstdio> #include <algor ...

  3. python3.x使用cxfreeze将.p打包成.exe

    之前写了一个使用ffplay批量查看格式为h264的图片,每次抽帧后都要打开pycharm编译器来运行程序,然后才能正常查看图片,或者在其他没有安装python环境的电脑中运行,很不方便.为此,在网上 ...

  4. Spring Boot教程(二)关于RabbitMQ服务器整合

    准备工作 15min IDEA maven 3.0 在开始构建项目之前,机器需要安装rabbitmq,你可以去官网下载,http://www.rabbitmq.com/download.html ,如 ...

  5. Oracle删除表空间报ORA01548

    由于undo表空间设置了自动增长,导致替换了好几个undo表空间,就想把原先的undo表空间删掉腾出空间 但删的时候报错 SQL> drop tablespace undotbs1 includ ...

  6. Java synchronized到底锁住的是什么?

    使用环境:多线程java程序中. 作用:在多线程的环境下,控制synchronized代码段不被多个线程同时执行.synchronized既可以加在一段代码上,也可以加在方法上. 使用:synchro ...

  7. 【flask-Email】邮件发送

    使用依赖: flask_mail 安装方式: pip3 install flask-mail 代码示例: from flask import Flask from flask_mail import ...

  8. tuple用法

    1 tuple中的元素可以直接赋给相同个数的变量 tup1 = ('asfa',234) p, q = tup1 print(p) print(q) # asfa # 参考:https://www.r ...

  9. 类Enum

    int compareTo(E o) 比较此枚举与指定对象的顺序. String name() 返回此枚举常量的名称,在其枚举声明中对其进行声明. int ordinal() 返回枚举常量的序数(它在 ...

  10. 远程桌面 使用 本地输入法(虚拟化 终端 远程接入 RemoteApp)

    远程桌面连接组件是微软从Windows 2000 Server开始提供的,该组件一经推出便受到了很多用户的拥护和使用.   在WINDOWS XP和WINDOWS SERVER 2003中微软公司将该 ...