CSS3学习笔记之图片边框属性

最新推荐文章于 2022-03-02 14:14:02 发布

atleks

最新推荐文章于 2022-03-02 14:14:02 发布

阅读量1.2k

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/atleks/article/details/38966939

版权

简介

border-image属性的语法如下：

border-image: source slice width outset repeat|initial|inherit;

各个参数含义如下：

source：图片地址，可以是相对或者绝对URL，如果这个值为none，表明边框没有图片

slice：可以使用1~4个值，用来表示各个边框背景图片的切割方式，注意，slice的值没有单位，因为默认的单位就是像素，这个参数比较复杂，后面会有详细的解说。

width：设置各个边框图片的宽度

outset：设置各个边框图片超出边框范围的大小，后面会有详细解说

上面其实是简写形式，border-image还可以分为如下几个单独的属性：

属性名称	属性含义	默认值
border-image-source	边框图片的路径，可以是绝对URL或者相对URL	none
border-image-slice	设置边框向内的偏移（这个非常重要，后面会有详解）	100%
border-image-width	设置边框背景图片的大小	1
border-image-repeat	设置边框图片的排列方式（可能的取值有repeat，round，stretch）	stretch
border-image-outset	边框图片超出边框范围的大小，后面会有详解	0

下面详解解说各个属性：

border-image-source:

语法为：

border-image-source(image-url);

其中，image-url可以是绝对url，也可以是相对url，如果不想使用边框图片也可以使用none，表示没有图片

样例：

border-image-source: url("image.jpg");

意思是将与CSS所在文件相同目录下的image.jpg当做边框图片

border-image-slice:

语法为：

border-image-slice: [<number> | <percentage>] {1, 4} && fill ?

这个属性相对比较复杂，我们先看看官方的解释：

这个属性规定了边框图片在top，right, bottom, left四个位置的向内偏移（inward offset）,将图片切割为9个区域，四个角，四条边，还有一个中心区域，中心区域默认会被丢弃（即完全透明），除非设置了fill关键字，
<percentage> : percentage代表相对图片尺寸大小的比例，水平比例是根据图片的长度，垂直比例是根据图片的高度

<number>: number代表所占的图片像素数（当图片是光栅图的时候）或者向量坐标（当图片是矢量图的时候）

fill: 如果标明了fill关键字，则图片的中心部分会被保留。

下面我根据自己的理解说明一下这个属性的含义。

border-image-slice会将图片切割为9个区域，假设，我们有一个图片大小为300×240,我们在边框图片中为其设置如下样式：

border-image-source: url("image.jpg");
border-image-slice: 25%  30%  15%  20%

最终会将图片切割为9个区域，效果如下：

即，border-image-slice后面可以跟最多四个值，这四个值也遵循我们在边框颜色这篇文章中讲到的Top/Right/Bottom/Left(即顺时针方向)这个原则，设置的非别是上边框，右边框，下边框和左边框的样式。

四个值中的第一个25%的含义是，从图片的最上边沿向下切割相对图片高度25%的长度，也就是240像素×25%=60像素，剩下的三个原理与之相同，这样，根据上面的示意图，四条线最终将图片切割为9个区域,用文字加表格表示如下9个区域：

top-left	top	top-right
left	center	right
bottom-left	bottom	bottom-right

其中，top-left, top-right, bottom-right, bottom-left四个区域是没有任何展示效果的，把这四个部分称为盲区，而top，right， bottom，left四个区域是属于展示效果区域，其中top和bottom收到水平方向效果影响，left和right收到垂直方向效果影响（效果包括border-image-repeat中设置的效果值）。

可以看到，border-image-slice的实际作用就是切割，根据设置的值将图片切割为9个部分。

border-image-repeat:

语法：

border-image-repeat: [stretch | repeat | round | space]{1,2}

此属性与其它属性不一样，border-iamge-repeat不遵循top，right，bottom，left的方位原则，它只接受一个或者两个参数值，第一个值表示水平方向的排列方式，第二个值表示垂直方向的排列方式，当只有一个值的时候，表示水平方向和垂直方向的排列方式相同，如果不设置任何值，则水平和垂直方向的排列方式默认都是stretch

各个值的含义如下:

strech：将图片拉伸以填充相应区域

repeat：将图片重复来填充相应区域

round：将图片重复来填充相应区域，如果整数个图片无法填充区域，则伸缩图片，使得整数个图片可以正好填充相应区域(这也是其与repeat的区别，repeat不会伸缩图片，所以在边缘有可能出现半个图片)

space：将图片重复来填充相应区域，如果整数个图片无法填充区域，则余下的区域留白

border-image-width:

语法：

border-image-width: [ <length> | <percentage> | <number>  | auto]{1, 4}

边框图片是被在一个叫做边框图片区域（border image area）的地方被绘制的，这篇区域的边界默认是边框盒（border box）, borser-image-width所取的四个值被用来将边框图片区域（border-image-area）切分为9个区域，代表了从top，right，bottom，left四个方向向内的偏移，遵循T/R/B/L原则。

可以参考W3School给的这个样例，可以很直观的看到效果。

border-image-outset:

这个属性取的值表示边框图片区域（border image area）超出边界盒（border box）的大小，四个值同样的遵循T/R/B/L原则。

具体效果，可以参考下无school上的这个样例。

浏览器兼容性

样例

这个样例实现按钮圆角阴影效果

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS3的border-image制作按钮</title>
  <style type="text/css">
.border-image-btn {
  display: inline-block;
  border: 18px solid green;
  border-width: 0 18px;
    border-image: url("button_sprite.png") 0 18 50 18;
  -webkit-border-image: url("button_sprite.png") 0 18 50 18;
  -moz-border-image: url("button_sprite.png") 0 18 50 18;
  -o-border-image: url("button_sprite.png") 0 18 50 18;
  -ms-border-image: url("button_sprite.png") 0 18 50 18;

  padding: 13px 10px 17px;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  text-decoration:none;
  line-height: 15px;
  margin: 10px;
}

.border-image-btn:hover {
  border-image: url("button_sprite.png") 50 18 0 18;
  -webkit-border-image: url("button_sprite.png") 50 18 0 18;
  -moz-border-image: url("button_sprite.png") 50 18 0 18;
  -o-border-image: url("button_sprite.png") 50 18 0 18;
  -ms-border-image: url("button_sprite.png") 50 18 0 18;

  color: #000;
  border-color: yellow;
  text-decoration: none;
}
  </style>
</head>
<body>
	<a href="#" class="border-image-btn">Click Me!</a>
	<a href="#" class="border-image-btn">用力点击我吧！</a>
	<a href="#" class="border-image-btn">CSS3 Border-image Button</a>
</body>
</html>

显示效果如下（Chrome）：

光标点击的时候效果如下：

atleks

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记之图片边框属性

简介border-image属性的语法如下：border-image: source slice width outset repeat|initial|inherit;各个参数含义如下：source：图片地址，可以是相对或者绝对URL，如果这个值为none，表明边框没有图片slice：可以使用1~4个值，用来表示各个边框背景图片的切割方式，注意，slice的值没有单位，因
复制链接

扫一扫