border --- 透明边框 

<!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>

 

posted on 2015-10-06 22:33  yhdsir  阅读(651)  评论(0)    收藏  举报

导航