<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>透明边框</title>

    <style>

        body {

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

        }

        div {

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

            background: white;

            background-clip: padding-box;

            /* styling */

            max-width: 20em;

            padding: 2em;

            margin: 2em auto 0;

            font: 100%/1.5 sans-serif;

        }

    </style>

</head>

<body>

    <div>

         CSS 中的半透明颜色，比如 rgba() 和 hsla()。

         <br>

         <br>

        background-clip的默认值为border-box，也就是说，背景色会填充到容器边框以及边框以内的地方，所以我们只需要将其修改为padding-box（让背景色在容器的内边距以及内边距以内填充）就可以实现所需要的效果了.

        <br>

        <br>

        border-color上能运用rgba()、hsla()设置边框为半透明或完全透明，如果元素设置了背景颜色或背景图片的时候，会直接影响边框的透明颜色效果。特别是，要看到边框底下的内容时。造成这个现象是由于背景图片会延伸到边框底部。要解决这一问题，可以通过CSS3的background-clip来修正。

    </div>

</body>

</html>

border --- 透明边框的更多相关文章

  1. CSS揭秘—透明边框（一）

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

  2. 利用CSS3实现透明边框和多重边框

    使用background-clip属性实现透明边框 .bordertest { border: 30px solid hsla(0,0%,90%,.5); background: #bbb; back ...

  3. CSS3实现原腾讯视频透明边框，多重边框等（关于边框那些不为人知的事情）

    1.hsla或rgba实现半透明边框. rgba在rgb的基础上增加了透明通道,就不详细说了,下面重点说下hsla: 说明: HSLA(H,S,L,A) 取值: H:Hue(色调).0(或360)表示 ...

  4. border 外边框

    语法: border:<line-width> || <line-style> || <color> <line-width> = <length ...

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

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

  6. CSS Border（边框）

    CSS Border(边框) 一.CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 示例效果: 二.边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来 ...

  7. SilverLight：布局（1） Border（边框）对象、Grid（网格）对象

    ylbtech-SilverLight-Layout:布局(1) Border(边框)对象.Grid(网格)对象 A, Border(边框)对象 B, Grid(网格)对象 C, Grid(网格)对象 ...

  8. css使用rgba()或hsla()设置半透明或完全透明边框border

    在css中我们想实现透明颜色,首先就会想到rgba()和hsla()这2个属性.这篇文章就简单介绍下使用这2种方式来实现半透明边框. 1.使用rgba方式: border: 10px solid rg ...

  9. border与透明边框

    1.背景:怎样增加复选框响应域的大小?就是,复选框点击区域增大一些 需求复选框的视觉区域大小(不含边框)是16px*16px 现在要把可点击区域增加到20px*20px 解决方案: box-shado ...

随机推荐

  1. 訪问控制 protected, public, private 对照

    OOP 3大特性:数据抽象,继承,动态绑定 3中訪问标号 protected, public, private 对照 用类进行数据抽象:用继承类继承基类的成员,实现继承.通过将基类对应函数声明为vir ...

  2. Ubuntu下安装配置和卸载Tomcat

    转载自:http://zyjustin9.iteye.com/blog/2177291 注:此处不采用apt-get安装,因为这种方式安装后,tomcat安装目录会到处都是,像天女散花一样.此处采取下 ...

  3. 如何为Apache JMeter开发插件（一）

    本文转载于http://blog.csdn.net/column/details/12925.html,作者:xreztento 作者写的很精华,我打算在此系列操作一遍后,加多点截图,便于更多人更快上 ...

  4. quick-cocos2d-x3.2 scheduler使用注意事项

    近期在使用scheduler时发现例如以下问题 调用: local scheduler = require(cc.PACKAGE_NAME .. ".scheduler") fun ...

  5. Maximum sum-动态规划

    A - Maximum sum Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Sub ...

  6. [译]GLUT教程 - 修改菜单

    Lighthouse3d.com >> GLUT Tutorial >> Pop-up Menus >> Modifying Menus 肯定会有菜单需要被修改的状 ...

  7. 为什么要用markdown写作

    无论是 EPUB, mobi,还是 Kindle 用的专有格式 .azw,都只是把一堆 `HTML 文件打包`而已.如果你写的是书,用 Markdown 标注格式之后,可以很方便地转为以上格式 使用W ...

  8. Hadoop编码解码【压缩解压缩】机制具体解释（1）

    想想一下,当你须要处理500TB的数据的时候,你最先要做的是存储下来. 你是选择源文件存储呢?还是处理压缩再存储?非常显然,压缩编码处理是必须的.一段刚刚捕获的60分钟原始视屏可能达到2G,经过压缩处 ...

  9. 苹果input点击页面稍微变大的问题

    今天在群里看到有人问input标签点击以后在ios下页面会变大一点的问题  说实话我是没有遇到过后来解决了我看了一下代码 我明白了 不是我没有遇到过是因为我写的比较规范 所以没出现那样的问题  嘿嘿. ...

  10. 自定义WPF ListBox的选择样式

    (下图:进行多项选择的ListBox) 首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的,SystemColors的HighlightBr ...