CSS3中新增的背景属性

最新推荐文章于 2024-06-05 22:45:58 发布

SSLUKA

最新推荐文章于 2024-06-05 22:45:58 发布

阅读量946

点赞数

文章标签： css

本文链接：https://blog.csdn.net/SSLUKA/article/details/106576570

版权

新增的背景属性

属性	功能
backgroun-clip	指定背景的显示范围
background-origin	指定绘制背景图像时的起点
background-size	指定背景中图像的尺寸
background-break	指定内联元素的背景图像进行平铺时的循环方式

1.background-clip属性

（1）作用
主要是用来控制背景显示区域
background-clip：border-box||padding-box||content-box
（2）分类

名称	作用
border-box	此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉
padding-box	背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉
content-box	背景从content区域向外裁剪，超出content区域的背景将被裁剪掉

3.举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-clip属性</title>
    <style>
        div{
   
            background-color: grey;
            width:300px;
            height:150px;
            border: dashed 30px blueviolet;
            padding:30px;
            background-clip: content-box;
        }
    </style>
</head>
<body>
<h1>CSS3中新增的background-clip属性</h1>
<div>CSS3中新增的background-clip属性</div>
</body>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-clip属性</title>
    <style>
        div{
   
            background-color: grey;
            width:300px;
            height:150px;
            border: dashed 30px blueviolet;
            padding:30px;
            background-clip: border-box;
        }
    </style>
</head>
<body>
<h1>CSS3中新增的background-clip属性</h1>
<div>CSS3中新增的background-clip属性</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3中新增的background-clip属性</title>
    <style>
        div{
   
            background-color: grey;
            width:300px;
            height:150px;
            border: dashed 30px blueviolet;
            padding:30px;
            background-clip:padding-box;
        }
    </style>
</head>
<body>
<h1>CSS3中新增的background-clip属性</h1>
<div>CSS3中新增的background-clip属性</div>
</body>
</html>

最低0.47元/天解锁文章

SSLUKA

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3中新增的背景属性

新增的背景属性属性功能backgroun-clip指定背景的显示范围background-origin指定绘制背景图像时的起点background-size指定背景中图像的尺寸background-break指定内联元素的背景图像进行平铺时的循环方式1.background-clip属性（1）作用主要是用来控制背景显示区域background-clip：border-box||padding-box||content-box（2）分类名
复制链接

扫一扫