CSS背景学习(四)

最新推荐文章于 2023-03-31 20:12:08 发布

叫我小袁就好

最新推荐文章于 2023-03-31 20:12:08 发布

阅读量78

点赞数

本文链接：https://blog.csdn.net/qq_42788101/article/details/89483380

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS背景学习(四)</title>
    <style>
        #example1{
            border:10px dotted black;
            padding:50px;
            background: yellow;
        }
        #example2{
            border:10px dotted black;
            padding: 50px;
            background: yellow;
            background-clip: padding-box;
        }
        #example3{
            border: 10px dotted black;
            padding: 50px;
            background: yellow;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <h1>CSS background-clip 属性</h1>
    <p>指定绘图区的背景：</p>
    <p>background-colot:yellow;</p>
    <p>background-clip:content-box;</p><br>



    <p>设置点线式边框——dotted</p>
    <hr>

    <h4>border-box</h4>
    <div id="example1">
        <p>border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。</p>
    </div>
    <br>

    <h4>padding-box</h4>
    <div id="example2">
        <p>padding-box	背景绘制在衬距方框内（剪切成衬距方框）。</p>
    </div>
    <br>

    <h4>content-box</h4>
    <div id="example3">
        <p>content-box	背景绘制在内容方框内（剪切成内容方框）。</p>
    </div>

</body>
</html>

袁同学——2019年4月23日

叫我小袁就好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS背景学习(四)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS背景学习(四)</title> <style> #example1{ border:10px dotted...
复制链接

扫一扫