前言：

　　　　所有实例均来自《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. 微信H5中静默登录及非静默登录的正确使用姿势

    在微信中打开网页且需要调用微信登录接口时,微信官方给我们提供了两种登录调用方式:静默登录和非静默登录:但是官方文档中却没有说明在何种情况下使用静默登录,何种情况下使用非静默登录,所以在这里,我想将之前 ...

  2. Spring-cloud (八) Hystrix 请求缓存的使用

    前言: 最近忙着微服务项目的开发,脱更了半个月多,今天项目的初版已经完成,所以打算继续我们的微服务学习,由于Hystrix这一块东西好多,只好多拆分几篇文章写,对于一般对性能要求不是很高的项目中,可以 ...

  3. 值得注意的CSS属性

    文本TEXT letter-spacing 字符间距 word-spacing 字间距 line-height 行高 text-decoration 修饰(下划线) text-indent 首行缩进 ...

  4. javascript 原型机制

    prototype,__proto__,constructor 在 JavaScript 原型继承结构里面,规范中用 [[Prototype]] 表示对象隐式的原型,在 JavaScript 中用 _ ...

  5. 【强连通分量】Bzoj1654 [Usaco2006 Jan]The Cow Prom 奶牛舞会

    Description 约翰的N(2≤N≤10000)只奶牛非常兴奋,因为这是舞会之夜!她们穿上礼服和新鞋子,别上鲜花,她们要表演圆舞．     只有奶牛才能表演这种圆舞．圆舞需要一些绳索和一个圆形的 ...

  6. Solr的中英文分词实现

    对于Solr应该不需要过多介绍了,强大的功能也是都体验过了,但是solr一个较大的问题就是分词问题,特别是中英文的混合分词,处理起来非常棘手. 虽然solr自带了支持中文分词的cjk,但是其效果实在不 ...

  7. mysql输入中文出现ERROR 1366

    MySQL输入中文出现如下错误: ERROR 1366: 1366: Incorrect string value: '\xE6\xB0\xB4\xE7\x94\xB5...' for column ...

  8. java happens-before原则规则

    程序次序规则:一个线程内,按照代码顺序,书写在前面的操作先行发生于书写在后面的操作: 锁定规则:一个unLock操作先行发生于后面对同一个锁额lock操作: volatile变量规则:对一个变量的写操 ...

  9. openstack学习（1）

    OpenStack项目结构 OpenStack架构 1. horizon以图形的方式管理所有的project,包括nova虚拟机的创建,neutron网络,cinder存储,glance镜像等:    ...

  10. 《HelloGitHub》第 35 期

    <HelloGitHub>第 35 期 兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程. ...