css3新增的背景与边框功能

最新推荐文章于 2023-03-25 20:11:22 发布

原创最新推荐文章于 2023-03-25 20:11:22 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了CSS3新增的功能，包括阴影、圆角边框、边框图像、文本阴影、背景图片的起源和裁剪、以及背景图片大小的设置。通过具体的语法和实例，帮助读者理解如何在不同浏览器中正确应用这些特性。

简介

css3比css2增加了许多的新功能，现在主浏览器 Chorme、Safari、Firefox、Opera都支持了它大部分功能，IE10以上开始支持它。使用CSS3时，不同的浏览器需要不同的前缀。为了更好的兼容。
Chrome 和 Safari：-webkit
Firefox：-moz
IE：-ms
Opera：-o

参考css3手册：http://css.doyoe.com/

新增功能

1：box-shadow：定义元素的阴影

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
X轴偏移量：水平阴影的位置，可以取负值
Y轴偏移量：垂直阴影的位置，可以取负值
阴影模糊半径：模糊距离
阴影扩展半径：阴影尺寸
阴影颜色：默认为黑色
投影方式：inset为内部阴影，默认为外部阴影

<style>
	div{
		width: 100px;
		height: 100px;
        box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
	}
</style>
}

效果
在这里插入图片描述
2：border-radius：圆角边框

<style>
	div{
		width: 100px;
		height: 100px;
        border: 1px solid black;
        border-radius:10px; /* 每个角半径为10px的圆角 */ 
       /*border-radius: 5px 4px 3px 2px; 半径分别是左上角、右上角、右下角和左下角*/ 
	}
	</style>

在这里插入图片描述
3：border-image：将图像应用到元素的边框上

border-image-source：定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。
border-image-slice：定义元素边框背景图像从什么位置开始分割。
border-image-width：定义元素边框背景图像厚度。
border-image-outset：定义元素边框背景图像的外延尺寸。
border-image-repeat：定义元素边框背景图像的平铺方式。

4:text-shadow:文本阴影
语法：text-shadow: X-Offset Y-Offset blur color;

X-Offset：阴影的水平偏移距离，正值阴影向右偏移，负值向左偏移；
Y-Offset：阴影的垂直偏移距离，正值阴影向下偏移，负值向上偏移；
Blur：阴影的模糊程度，不能为负值，值越大，阴影越模糊，值越小阴影越清晰，不需要阴影模糊可以将Blur值设置为0；
Color：阴影的颜色，可以使用rgba色。

5：background-origin：设置元素背景图片的原始起始位置。
语法：border-box：background-origin ： border-box | padding-box | content-box;

border-box：从border区域（含border）开始显示背景图像。
padding-box：从padding区域（含padding）开始显示背景图像。
content-box：从content区域开始显示背景图像。

6：background-clip：将背景图片裁剪
语法：background-clip ： border-box | padding-box | content-box | no-clip

border-box：从border区域（含border）开始向外裁剪背景。
padding-box：从padding区域（含padding）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。

7：background-size：设置背景图片的大小
语法：background-size: auto | <长度值> | <百分比> | cover | contain

auto：默认值，不改变背景图片的原始高度和宽度；
<长度值>：长度值指定背景图像大小。不允许负值。；
<百分比>：用百分比指定背景图像大小。不允许负值。
cover：覆盖，将背景图片等比缩放以填满整个容器；
contain：容纳，将背景图片等比缩放至某一边紧贴容器边缘为止