background---背景颜色和背景图片填充的范围

最新推荐文章于 2023-07-31 10:51:50 发布

孤枫_J

最新推荐文章于 2023-07-31 10:51:50 发布

阅读量1w

点赞数 1

分类专栏： HTML+CSS 文章标签： css border

本文链接：https://blog.csdn.net/qq_35809245/article/details/53638986

版权

HTML+CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一 border定义：

1 元素的边框 (border) 是围绕元素内容（width+height）和内边距（padding）的一条或多条线。
2 边框与背景
CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。
CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

二明确这些细小的定义之后，简单写个demo走下效果：

    .one {
            width: 800px;
            height: 400px;
            border:dotted green 50px;       
        }


    <body>
        <div class="one"></div>
    </body>'

background

.one {
        width: 800px;
        height: 400px;
        border:dotted green 50px;
        background-color:pink;

    }

bgc

背景色会填充到border 区域。

    .one {
            width: 800px;
            height: 400px;
            border:dotted green 50px;
            background: url(vb.jpg) ;
            }

设置背景图片