CSS中的background-clip

最新推荐文章于 2023-03-14 11:03:56 发布

橘子的心脏

最新推荐文章于 2023-03-14 11:03:56 发布

阅读量409

点赞数

分类专栏： CSS 文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_43693115/article/details/119977550

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS : background-clip

background-clip 设置元素的背景的延伸程度。
这里举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            /* 设置背景颜色 */
            background-color: rgb(147, 212, 141);
            /* 设置内边距 */
            padding: 10px;
            /* 设置边框 */
            border: 10px solid rgba(197, 175, 175,.3);
            /* 宽度和高度 */
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        这是一段话
    </div>
</body>
</html>

这里是不加background-clip的结果，会发现背景颜色会在边框下面显示导致有透明效果的边框变色：
在这里插入图片描述
这个时候我们添加background-clip，并设置值为默认值border-box。

        .box1{
            /* 设置背景颜色 */
            background-color: rgb(147, 212, 141);
            /* 设置内边距 */
            padding: 10px;
            /* 设置边框 */
            border: 10px solid rgba(240, 34, 34, 0.3);
            /* 宽度和高度 */
            width: 100px;
            height: 100px;
            /* 设置背景修剪 */
            background-clip: border-box;
        }

这个时候显示的跟不添加background-clip的效果是一样的。
在这里插入图片描述
这个时候我们更换background-clip的值为content-box 。

        .box1{
            /* 设置背景颜色 */
            background-color: rgb(147, 212, 141);
            /* 设置内边距 */
            padding: 10px;
            /* 设置边框 */
            border: 10px solid rgba(240, 34, 34, 0.3);
            /* 宽度和高度 */
            width: 100px;
            height: 100px;
            /* 设置背景修剪 */
            background-clip: content-box;
        }

这个时候发现设置的背景颜色只在文字区域显示。
在这里插入图片描述
我们继续更换background-clip的值为padding-box。

        .box1{
            /* 设置背景颜色 */
            background-color: rgb(147, 212, 141);
            /* 设置内边距 */
            padding: 10px;
            /* 设置边框 */
            border: 10px solid rgba(240, 34, 34, 0.3);
            /* 宽度和高度 */
            width: 100px;
            height: 100px;
            /* 设置背景修剪 */
            background-clip: padding-box;
        }

这个时候会发现设置的背景颜色不仅仅在文字区域显示还在设置的内边距上显示。
在这里插入图片描述

总结：

background-clip的值作用：

border-box 背景延伸至边框外沿，但是在边框下面。
content-box 背景被裁剪到内容框外沿。
padding-box 背景被延伸到内边距框。

橘子的心脏

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS中的background-clip

CSS : background-clipbackground-clip 设置元素的背景的延伸程度。这里举个例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
复制链接

扫一扫