前言：

　　　　所有实例均来自《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. aliyun TableStore相关操作汇总

    总结:这个东西本身可能技术还不成熟,使用的人少,有问题很验证解决 遇到的问题:(1)没有一个GUI工具,使用门槛高(2)查询的GetRange不方便,把查询出来的数据使用System.out.prin ...

  2. 简书markdown教程

    1 支持 Markdown 的编辑器 Windows 推荐 Sublime Text 3,强大优雅的编辑器.MarkdownPad,一款可以直接预览排版效果的编辑器. Mac 推荐 Ulysess,专 ...

  3. GO语言.树莓派.环境安装和测试

    Go是Google开发的一种静态强类型.编译型.并发型,并具有垃圾回收功能的编程语言.为了方便搜索和识别,有时会将其称为Golang 记录一下如何在树莓派上安装语言环境 第一步: 下载安装包 http ...

  4. Mave手动安装jar包

    今天配置Maven项目时有一个相应的jdbc驱动jar包导不进去,就自己导入了. 首先在官网上下载该jar包,地址为http://mvnrepository.com/ 点击jar下载. 用maven命 ...

  5. BZOJ_4439_[Swerc2015]Landscaping_最小割

    BZOJ_4439_[Swerc2015]Landscaping_最小割 Description FJ有一块N*M的矩形田地,有两种地形高地(用‘#’表示)和低地(用‘.’表示) FJ需要对每一行田地 ...

  6. BZOJ_1486_[HNOI2009]最小圈_01分数规划

    BZOJ_1486_[HNOI2009]最小圈_01分数规划 Description Input Output Sample Input 4 5 1 2 5 2 3 5 3 1 5 2 4 3 4 1 ...

  7. 关于throw、throws、try--catch的问题

    首先回顾概念 throws表示出现异常的一种可能性,并不一定会发生这些异常 throw则是抛出了异常,执行throw则一定抛出了某种异常 try--catch try语句用大括号{}指定了一段代码,该 ...

  8. Spark学习之Spark调优与调试(二)

    下面来看看更复杂的情况,比如,当调度器进行流水线执行(pipelining),或把多个 RDD 合并到一个步骤中时.当RDD 不需要混洗数据就可以从父节点计算出来时,调度器就会自动进行流水线执行.上一 ...

  9. python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决

    在学习python语言中用json库解析网络数据时,我遇到了两个编译错误:json.decoder.JSONDecodeError: Expecting property name enclosed ...

  10. 启动VMware虚拟机时总是出现许可证到期提示怎么办？

    不知道大家有没有遇到过这个问题,每次当你打开VMware虚拟机时它总是会提示许可证到期,需要注册,还会出现许多报红的代码,下面就让小编带大家解决一下吧~ VMware教程 如果Fusion本身无法启动 ...