CSS3新增背景与边框

最新推荐文章于 2024-05-18 14:24:10 发布

weixin_45846291

最新推荐文章于 2024-05-18 14:24:10 发布

阅读量486

点赞数

本文链接：https://blog.csdn.net/weixin_45846291/article/details/105604456

版权

CSS3新增背景与边框

在以前的版本里面的边框和背景有：

边框的属性有：

border(边框)、border-width(边框宽度)、border-style(边框样式)、border-color(边框颜色)
其中边框的样式的属性值有：
none:无轮廓。当定义了该值时就会忽略border-color的样式，并且他设置的边框宽度的样式也会忽略，除非边框设置的为border-image属性。
hidden：隐藏边框。
dotted：点状轮廓。
dashed：虚线轮廓。
solid：实线轮廓

背景的属性有：

background-color(背景颜色)
CSS3里面新增的背景属性：background(背景的复合写法)、background-image(背景图片)、background-repeat(背景是否平铺)、background-position(背景图片的定位，这个一般是和背景图片一起使用的)、background-attachment(定义滚动时背景图像相对于谁固定)*

背景的复合写法的语法一般都为：

//这里的解释就是带有url属性的是作为背景图片的，no-repeat属性是背景图片是否平铺的属性这个是不平铺的意思，第三个属性是表示背景图片相对于元素定位，第四个属性是表示背景图片定位的属性值，第五个属性是背景图片的大小，第六个属性是表示指定背景图像从元素的哪个区域作为显示的原点，第七个属性是表示指定背景图像向外裁剪的区域，第八个属性是指定背景颜色。
background:url(test1.jpg)  no-repeat scroll 10px 20px/50px 60px content-box padding-box,url(test2.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,url(test3.jpg) no-repeat scroll 10px 2

background-repeat这个是背景图片的平铺，他的默认值为平铺的。
他的属性有：
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺
下面的两个属性是新增的：
round：当背景图像不能以整数次平铺时，会根据情况缩放图像。
space：当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。

注意：

这个平铺的新增属性在IE8里面是不兼容的

background-attachment的属性有：

fixed：背景图像相对于视口（viewport）固定。
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

下面的这个属性是CSS3里面新增的：
local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。
注意：这个在CSS3的基础上面新增的属性是在IE8下面是不兼容的，在IOS系统下的Safari浏览器部分8.0到11.2版本的部分支持。

在原来的CSS上面没有的属性完完整整新增的属性是：background-origin(根据background-position时的参考原点(位置)进行计算)和background-clip(向外裁剪背景)和background-size(背景图片大小)

background-origin的属性有：

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

注意：

他的默认值为padding-box，这个属性在IE8下是不兼容的。

例：

<style>
h1{font-size:20px;}
h2{font-size:16px;}
p{border:10px dashed #666;width:200px;height:200px;padding:20px;background:#aaa url(skin/p_103x196_1.jpg) no-repeat;}
.border-box p{background-origin:border-box;}
.padding-box p{background-origin:padding-box;}
.content-box p{background-origin:content-box;}
</style>


<h1>background-origin</h1>
<ul class="test">
	<li class="border-box">
		<h2>border-box</h2>
		<p>从border区域（含border）开始显示背景图像</p>
	</li>
	<li class="padding-box">
		<h2>padding-box</h2>
		<p>从padding区域（含padding）开始显示背景图像</p>
	</li>
	<li class="content-box">
		<h2>content-box</h2>
		<p>从content区域开始显示背景图像</p>
	</li>
</ul>

background-clip的属性有：

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

注意：

我们一般使用这个的时候会去这样去写：-webkit-background-clip: text;background-clip: text;
这个属性的值为text时在IE8.0-IE16.0和Firefox的2.0-48.0下面是不兼容的
他的默认值为border-box。

例：

body {
            background-color: #555;
        }
header {
   width: 900px;
   height: 150px;
   position: absolute;
   top: 50px;
   left: 50px;
   font-size: 100px;
   font-weight: bold;
   color: transparent;

   background-image: url("2.jpg");
   background-repeat: no-repeat;
   background-position: -10px -150px;

   -webkit-background-clip: text;
   background-clip: text;
   transition: all 2s;
   -webkit-text-fill-color: transparent;
        }



<header>蓬松的头发</header>

background-size的属性有：

设置参数值方式一：用长度值指定背景图像大小。不允许负值。
设置参数值方式二：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

注意：

这个属性会影响background-origin的取值
他的这个属性在IE8的时候不兼容

在CSS3下面新增的边框上面的属性：

box-shadow(定义元素的阴影)的属性有：
取值：
none：无阴影
第一个参数：第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
第二个参数：第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
第三个参数：第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
第四个参数：第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩
：定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
inset：定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影

注意：

这个属性在IE8下面是不支持的
他的默认值为none

例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.test li {
	margin-top: 20px;
	list-style: none;
	width: 400px;
	padding: 10px;
	background: #eee;
}
.test .outset {
	box-shadow: 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-blur {
	box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-extension {
	box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
}
.test .inset {
	box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}
.test .multiple-shadow {
	box-shadow:
		0 0 5px 3px rgba(255, 0, 0, .6),
		0 0 5px 6px rgba(0, 182, 0, .6),
		0 0 5px 10px rgba(255, 255, 0, .6);
}
</style>
</head>
<body>
<ul class="test">
	<li class="outset">外阴影常规效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li>
	<li class="outset-blur">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
	<li class="outset-extension">外阴影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li>
	<li class="inset">内阴影效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li>
	<li class="multiple-shadow">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
</ul>
</body>
</html>

border-radius(定义元素的圆角)的属性取值有：

取值：
：用长度值定义圆形半径或椭圆的半长轴，半短轴。不允许负值
：用百分比定义圆形半径或椭圆的半长轴，半短轴。水平方向百分比参照元素宽度（非内容宽度），垂直方向参照元素高度。不允许负值

注意：
这个属性在IE8就是不支持的
这个的参数为四个的时候的意思是左上角、右上角、右下角、左下角
这个的阐述为两个的时候的意思是左上右下、右上左下
默认值为0

例：

.demo {
	//左上角
    border-top-left-radius: 55pt 25pt;
    //右上角
    border-top-right-radius: 55pt 25pt;
    //右下角
    border-bottom-right-radius: 55pt 25pt;
    //左下角
    border-bottom-left-radius: 55pt 25pt;
}

border-image(边框背景图片)的取值：

border-image-source：定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。
这个的取值：
none：无背景图片。
：使用绝对或相对地址指或者创建渐变色来确定图像。
这个的属性的默认值为none

注意：这个属性在IE10的时候不兼容的

例子：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>border-image-source_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
	padding: 10px;
	border: 27px solid;
	border-image-source: url(skin/border.png);
	border-image-slice: 27;
	border-image-width: 27px;
}
</style>
</head>
<body>
<div class="test">用图片来做边框</div>
</body>
</html>

border-image-slice：定义元素边框背景图像从什么位置开始分割。
取值：
：用浮点数指定图像分割的位置。数字代表在图像上的像素位置或向量坐标。不允许负值。
：用百分比指定图像分割的位置。垂直和水平方向的百分比分别参照图片的宽和高进行换算。不允许负值。
fill：保留裁减后的中间区域，其铺排方式遵循border-image-repeat的定义。

这个是一张图片的解析图如下：
在这里插入图片描述

注意：

图中 A, B, C, D 表示从上右下左对图像进行4次分割。图像被分割成 1, 2, 3, 4 这4个角和 5, 6, 7, 8 这4条边，最后包括中间部分9。其中中间的部分 9 默认不会被图像填充，除非定义了关键字fill

例子：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>border-image-slice_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test1,
.test2 {
	margin-top: 10px;
	padding: 5px;
	border-width: 1px 9px;
	border-style: solid;
	border-color: orange;
	border-image-source: url(skin/button.png);
	border-image-repeat: repeat stretch;
}
.test1 {
	border-image-slice: 1 9;
}
.test2 {
	border-image-slice: 1 9 fill;
}
</style>
</head>
<body>
<div class="test1">这个是不保留裁减后的中间区域</div>
<div class="test2">这个是保留裁减后的中间区域</div>
</body>
</html>

border-image-width：定义元素边框背景图像厚度。
取值：
：用长度值指定图像边框的厚度。不允许负值。
：用百分比指定图像边框的厚度。参照图像边框区域的大小（包含border和padding）进行换算。不允许负值。
：用浮点数指定图像边框的厚度。该值表示为border-width的倍数，若值为2，则使用值为2 * border-width。不允许负值。
auto：如果auto值被设置，则border-image-width采用与border-image-slice相同的值。

注意：
这个属性在IE10.0的版本上是不兼容的
默认值为1

例：

.demo {
	width: 200px;
	height: 100px;
	padding: 20px;
	border: 10px solid;
	border-image-source: linear-gradient(red, yellow);
	border-image-slice: 5;
	border-image-width: 10%;
}
//此时，border-image-width的计算值是16px 26px。即，垂直方向：(100+20*2+10*2)*10%=16px，水平方向：(200+20*2+10*2)*10%=26px

border-image-outset：定义元素边框背景图像的外延尺寸。
取值：
：
用长度值指定边框图像向外偏移的距离。不允许负值。
：
用浮点数指定边框图像向外偏移的距离。该值表示为border-width的倍数，若值为2，则使用值为2 * border-width。不允许负值。
注意：
这个属性的默认值为0。
该属性接受1~4个参数值，如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时作用于四边。
该属性用于指定边框图像向外偏移的距离，如果值为10px，则图像在原本的基础上往外延展10px再显示，但并不会影响布局，因为它本身并不占据布局空间。这有点类似outline-offset。

例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>border-image-outset_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test{
	padding: 10px;
	border: 27px solid;
	border-image-source: url(skin/border.png);
	border-image-slice: 27;
	border-image-width: auto;
	border-image-outset: 10px;
}
</style>
</head>
<body>
<div class="test">用图片来做边框</div>
</body>
</html>

border-image-repeat：定义元素边框背景图像的平铺方式。
取值：
stretch：将被分割的图像使用拉伸的方式来填充满边框图像区域。
repeat：将被分割的图像使用重复平铺的方式来填充满边框图像区域。当图像碰到边界时，如果超过则被截断。
round：与 repeat 关键字类似。不同在于，当背景图像不能以整数次平铺时，会根据情况缩放图像。
space：与 repeat 关键字类似。不同在于，当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。

border-image-repeat的要注意的点：
默认值为stretch。
该属性接受1~2个参数值，如果提供两个参数，第一个用于水平方向，第二个用于垂直方向；只提供一个，则水平和垂直方向都应用该值。
他的取值中Basic、Support、round和space在IE10.0下是不支持的，在其他的浏览器的版本里面都有部分版本不支持

例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>border-image-repeat_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.demo{
	margin: 30px;
	padding: 10px;
	border: 27px solid;
	border-image-source: url(skin/border.png);
	border-image-slice: 27;
}
.demo1 {
	border-image-repeat: stretch;
}
.demo2 {
	border-image-repeat: repeat;
}
.demo3 {
	border-image-repeat: round;
}
.demo4 {
	border-image-repeat: space;
}
</style>
</head>
<body>
<div class="demo demo1">使用 stretch 关键字来拉伸填充</div>
<div class="demo demo2">使用 repeat 关键字来重复平铺填充</div>
<div class="demo demo3">使用 round 关键字来拉伸填充</div>
<div class="demo demo4">使用 space 关键字来拉伸填充</div>
</body>
</html>

border-image要注意的点：

这个border-image是复合写法的
在定义border-image属性的前提是要定义了border-width和border-style属性
这个在IE10是不支持的，其他绝大多数的浏览器的只是部分版本的支持

例：

.test {
	border: 10px solid gray;
	border-image: url(test.png) 10/10px;
}
//如果例子中的图片不可见，或者未被加载，则会以border的定义呈现，如果图片载入成功，则以border-image的定义呈现。

注意：

在绝大说的基本上都存在部分支持的情况，绝大多数都会在IE8或IE10.0的版本下面不支持的。

weixin_45846291

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫