前言：

　　　　所有实例均来自《CSS揭秘》，该书以平时遇到的疑难杂症为引，提供解决方法，只能说秒极了，再一次刷新了我对CSS的认知

　　　该书只提供了关键CSS代码，虽然有在线示例代码链接，但访问速度较慢。下面示例代码是我自己写的，若有错误，欢迎指正

　　　注：我会在最开头附上每个相关示例所需CSS属性链接作为补充，以供查阅和学习

　　　　　我会在每个示例最后附上书中提供的在线示例代码链接；

　　　　　我会从书中选择一些css技巧来分享，有兴趣的小伙伴可以去看看这本书，你不会失望的

　　CSS需知：

　　　　background-clip属性

rgba()和hsla()的区别

　　场景：

　　　　如果让你实现下图border边框透明的效果，你会怎么做呢？

　　　　　

　　　　

　　　　可能聪明的你首先想到利用 rgba()或hsla()来实现，但结果却不尽人意，边框不见了，如下图

　　　　

　　背景工作原理： 

　　　  其实我们设置的边框并没消失，而造成上面截图的情况是因为 默认情况下，背景会延伸到边框所在的区域下层

　　　　

　　

　　  解决方法：

　　　　我们所做的事情并没有让 body 的背景从半透明白色边框处透上来，而是在半透明色边框处透出了这个容器自己的

　　　纯白实色背景，固实际上看到的效果跟纯白色的边框看起来完全一样。

　　　我们要做的是通过 background-clip 属性并设置值为 padding-box，这样浏览器会用内边距的外沿把背景裁切掉

　　DEMO

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            p {

                margin: 0;

                padding: 0;

            }

            body {

                background: url(http://csssecrets.io/images/stone-art.jpg) no-repeat;

                background-size: cover;

            }

            .content {

                position: absolute;

                margin: auto;

                top: 0;

                right: 0;

                bottom: 0;

                left: 0;

                width: 600px;

                height: 300px;

                border: 10px solid rgba(255, 255, 255, .5);

                /*也可以用下面代码hsla()替代rgba()的方式实现透明边框*/

                /*border: 10px solid hsla(0,10%,100%,.5);*/

                background-color: #fff;

                background-clip: padding-box;

            }

            .content p {

                position: absolute;

                left: 50%;

                top: 50%;

                margin: -40px 0px 0px -250px;

            }

        </style>

    </head>

    <body>

        <section class="content">

            <p>Newsgd.com is the premier online source of Guangdong news and information, fully displaying Guangdong through channels including Guangdong News, Guangdong</p>

        </section>

    </body>

</html>

　　书中在线实例链接：http://dabblet.com/gist/012289cc14106a1bd7a5

CSS揭秘—透明边框（一）的更多相关文章

  1. 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]

    这个效果可是通过代码实现的哦,在不同浏览器下都可以正常显示 对于html中使用CSS实现透明边框的效果,主要有以下四种属性设置方法,但由于 这些属性兼容性并不是很好,单一使用会造成不同浏览器显示效果不 ...

  2. CSS揭秘—多重边框（二）

    前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...

  3. CSS揭秘-半透明边框与多重边框

    场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为   解决方案: 使用backgroun ...

  4. CSS实现透明边框

    border: 8px solid rgba(255,255,255,0.2);

  5. CSS揭秘之多重边框&连续的图像边框

    1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...

  6. [css 揭秘]：CSS揭秘 技巧（四）：边框内圆角

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...

  7. [css 揭秘]：CSS揭秘 技巧（二）：多重边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...

  8. [css 揭秘]：CSS揭秘 技巧（一）：半透明边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...

  9. CSS揭秘读书笔记 （一）

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

随机推荐

  1. How to untar a TAR file using Apache Commons

    import org.apache.commons.compress.archivers.tar.TarArchiveEntry; import org.apache.commons.compress ...

  2. 【译文】CSS技术：如何正确的塑造button样式！

    , but useful for */ display: inline-block; text-align: center; text-decoration: none; /* create a sm ...

  3. 使用jvisualvm

    jvisualvm是java开发,调试,监控,分析内存的一个可视化工具,可以在安装完JDK中找到,一般在bin目录下 之前调试tomca内存分配,现在总结下心得, windows下的tomcat修改c ...

  4. 模板——无旋Treap

    #include "bits/stdc++.h" using namespace std; inline int read(){ ,k=;char ch=getchar(); :, ...

  5. ELK---日志分析系统

    ELK就是一套完整的日志分析系统 ELK=Logstash+Elasticsearch+Kibana 统一官网https://www.elastic.co/products ELK模块说明 Logst ...

  6. Matlab实现画柱状图坐标标签旋转

    引言: 在用matlab画柱状图或者其他图的时候,你是否碰到下图这种情况: 乍一看这个柱状图画的有馍有洋的,but,仔细一看你会发现,横坐标标签如果再长一点就不好看啦,甚至会重叠,就像这样: 这样的图 ...

  7. Java Native Interface调用C++代码

    概述 Java Native Interface译为Java原生接口,简称JNI.Java并不是完美的,它的不足体现在运行速度要比传统的C++慢上许多,并且无法直接访问到操作系统底层,为此Java提供 ...

  8. MIPCache 域名升级

    一.MIPCache URL 是什么 举个例子,MIP 官网的 URL 为: https://www.mipengine.org 对应的 MIPCache 的 URL 为: https://mipca ...

  9. API 测试的具体实现

    目录 API 测试的具体实现 基于 Spring Boot 构建的 API 使用 cURL 命令行工具进行测试 使用图形界面工具 Postman 进行测试 如何应对复杂场景的 API 测试? 总结 A ...

  10. 将AE开发的专题图制作功能发布为WPS

    AE开发可以定制化实现ArcGIS的地理处理功能,并实际运用于其他方面的工作,有时候我们还希望将AE开发的功能发布为网络地理信息处理服务(WPS),从而能在Web端更自由便利地调用所需要的地学处理算法 ...