前言：

　　　　所有实例均来自《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. Eclipse中导入项目后js报错解决方法

    http://blog.csdn.net/chenchunlin526/article/details/54666882 原因是因为开启了js的校验功能 不影响项目 如需去除错误标志按链接文档操作即可 ...

  2. jQuery学习之旅 Item10 ajax快餐

    1. 摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...

  3. websocket(一)--握手

    最近在琢磨怎么实现服务端的消息推送,因为以前都是通过客户端请求来获取信息的,如果需要实时信息就得轮询,比如通过ajax不停的请求. websocket相当于对HTTP协议进行了升级,客户端和服务端通过 ...

  4. HTTP/HTTPS 学习笔记

    超文本传输协议(HyperText Transfer Protocol) 伴随着计算机网络和浏览器的诞生,HTTP1.0也随之而来,处于计算机网络中的应用层,HTTP是建立在TCP协议之上的. HTT ...

  5. CSS技术实例1-使用CSS计数器实现数值计算小游戏实例页面

    一 实例要达到的要求如图所示: 二 分析 1.7个圆角矩形标签(或按钮) 2. 点击触发并开始运算,最后一个标签显示结果 3.计算成功后弹出"万岁"字眼 三 代码实现 关键CSS代 ...

  6. 关于crontab命令

    crontab命令 crontab命令常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于"crontab"文件中,以供 ...

  7. Guava新增集合类型-Multiset

    Guava新增集合类型-Multiset Guava引进了JDK里没有的,但是非常有用的一些新的集合类型.所有这些新集合类型都能和JDK里的集合平滑集成.Guava集合非常精准地实现了JDK定义的接口 ...

  8. kv.go

    package clientv3 import (     pb "github.com/coreos/etcd/etcdserver/etcdserverpb" //protob ...

  9. BZOJ_1391_[Ceoi2008]order_最大权闭合子图

    BZOJ_1391_[Ceoi2008]order_最大权闭合子图 Description 有N个工作,M种机器,每种机器你可以租或者买过来. 每个工作包括若干道工序,每道工序需要某种机器来完成,你可 ...

  10. C# 在异步线程操作类的变量

    如下代码: public partial class Form1 : Form { public Form1() { InitializeComponent(); } public string Me ...