半透明边框

最新推荐文章于 2021-08-04 06:43:02 发布

MDistance

最新推荐文章于 2021-08-04 06:43:02 发布

阅读量178

点赞数

分类专栏： CSS揭秘

本文链接：https://blog.csdn.net/qq_35263273/article/details/80558336

版权

CSS揭秘专栏收录该内容

13 篇文章 0 订阅

订阅专栏

半透明边框

background-clip属性

浏览器支持：
IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。
注释： Internet Explorer 8 以及更早的版本不支持 background-clip 属性。

默认值：border-box

语法

background-clip: border-box|padding-box|content-box;

值	描述
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

示例

border-box(默认值)

.div_border{
   margin: 40px auto;
    height: 200px;
    width: 200px;
    background: white;
    border: 10px solid hsla(0, 0%, 100%, .5);
    background-clip: border-box;
    padding: 10px;
}

<body style="background: hotpink">
    <div class="div_border">
        <h1>半透明边框</h1>
    </div>
</body>

效果图
这里写图片描述

padding-box

.div_border{
   margin: 40px auto;
    height: 200px;
    width: 200px;
    background: white;
    border: 10px solid hsla(0, 0%, 100%, .5);
    background-clip: padding-box;
    padding: 10px;
}

<body style="background: hotpink">
    <div class="div_border">
        <h1>半透明边框</h1>
    </div>
</body>

效果图
这里写图片描述

content-box

.div_border{
   margin: 40px auto;
    height: 200px;
    width: 200px;
    background: white;
    border: 10px solid hsla(0, 0%, 100%, .5);
    background-clip: content-box;
    padding: 10px;
}

<body style="background: hotpink">
    <div class="div_border">
        <h1>半透明边框</h1>
    </div>
</body>

效果图
这里写图片描述

MDistance

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
半透明边框

半透明边框background-clip属性浏览器支持： IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。注释： Internet Explorer 8 以及更早的版本不支持 background-clip 属性。默认值：border-box语法background-clip: border-...
复制链接

扫一扫