zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    [LeetCode]Sort List
    [LeetCode]Single Number II
    合并两个排序的列表
    翻转链表
    链表中倒数第k个结点
    调整数组顺序使奇数位于偶数前面
    数值的整数次方
    二进制中1的个数
    矩形覆盖
    变态跳台阶
  • 原文地址:https://www.cnblogs.com/yhdsir/p/4857912.html
Copyright © 2011-2022 走看看