CSS3——box-sizing\background-size\box-shadow

最新推荐文章于 2021-01-30 18:22:16 发布

原创最新推荐文章于 2021-01-30 18:22:16 发布 · 815 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css3

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了 CSS3 中 box-sizing、background-size 和 background-origin 属性的使用方法，并提供了 box-shadow 的示例代码。通过这些属性，可以更好地控制网页元素的布局、背景图片的尺寸和位置。

语法：
box-sizing: content-box|border-box|inherit;
属性说明：
content-box：在已设定的宽度和高度之外绘制元素的内边距和边框。
border-box：在已设定的宽度和高度之内绘制元素的内边距和边框。
浏览器支持：
IE8+、火狐、谷歌。
代码演示：

    /*css:改变元素的box-sizing属性值查看变化*/
    .op {
        width: 100px;
        height: 100px;
        background: red;
        margin-top: 20px;
        padding: 20px;
        border: 6px solid #000; 
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    /*html*/
    <div class="op"></div>

这里写图片描述
用处：
两行宽度50%布局：如果不用这个属性，设置border后右边的div会下来错位，设置这个属性，宽度还是50%而不是50%+*px,两行可以并列显示。
input框：加了padding 和border之后，实际的宽度还是最初设置的宽高。

CSS3 background-size 属性

语法：
background-size: length|percentage|cover|contain;
属性说明：

值	描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

CSS3 background-size 属性:规定背景图片的尺寸。

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

<!-- 调整背景图片的大小：background-size:63px 100px; -->
 div {background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; }
<!--  对背景图片进行拉伸，使其完成填充内容区域：background-size:40% 100%; -->
 div {background:url(bg_flower.gif); -moz-background-size:40% 100%; /* 老版本的 Firefox */ background-size:40% 100%; background-repeat:no-repeat; }

CSS3 background-origin 属性:规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域

<!-- 在 content-box 中定位背景图片：background-origin:content-box; -->
div {background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; background-origin:content-box; }

box-shadow

语法：
box-shadow: h-shadow v-shadow blur spread color inset;
属性说明：

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。