欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css——透明边框

程序员文章站 2024-03-22 22:43:16
...

css须知

background-clip属性
rgba()和hsla()的区别

border边框透明

接手项目需要 border边框透明，如下图：
css——透明边框
当然图是网上扒的，因为公司项目签过保密协议，不能瞎搞。我再经手做项目的时候用rgba（）来实现的，但是结果不尽人意，啥也不是，边框没有了。
css——透明边框

着实让人头疼，不过还好，我们有别的解决方法，兵来将挡水来土掩，活人还能让尿憋死不成。

解决方法

通过 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>

边框透明就成了。
本文借鉴了css揭秘-透明边框

相关标签： 不一样的前端 css html

上一篇： kubernetes安装 博客分类： kubernates kubernetes 

下一篇： 基于curator实现leader选举 博客分类： zookeeper zookeepercuratorleader选举 

推荐阅读