CSS3-新增属性

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

房东的喵

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

阅读量494

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/luxunlx123/article/details/105888105

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

在这里插入图片描述
默认值为border-box

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {width: 600px;height: 600px;border: 20px #000 dashed;margin: 0 auto;
            background: url(../img/1.jpg);background-clip: /*padding-box*/content-box; padding: 20px;} 
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

在这里插入图片描述

默认值为padding-box

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {width: 600px;height: 600px;border: 20px #000 dashed;margin: 0 auto;
            background: url(../img/1.jpg);background-origin: /*border-box content-box*/padding-box;} 
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {width: 800px;height: 600px;border: 20px #000 dashed;margin: 0 auto;
            background: url(../img/1.jpg) no-repeat; background-size: /*400px 400px*/ /*50% 50%*/ /*cover*/ contain;} 
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

在这里插入图片描述

房东的喵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3-新增属性

默认值为border-box<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box {wid...
复制链接

扫一扫