CSS 第004篇边框-实战2

最新推荐文章于 2023-02-11 19:19:24 发布

ml_YSY

最新推荐文章于 2023-02-11 19:19:24 发布

阅读量381

点赞数

分类专栏： CSS3-Study 文章标签： css

本文链接：https://blog.csdn.net/ml_ysy/article/details/109540671

版权

CSS3-Study 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言：原始代码和前篇一致在此处就不再次展示了，忘了的回去看一眼。

>1 边界图片属性：border-image: source slice width outset repeat;

由于是用图片来作为边框样式，原有的边框样式会被覆盖掉，当图片不能显示时，原始的边框样式会显示。

a、border-image-source

border-image-source: none|image;

用在边框的图片的路径URL，默认值none。如下实例：

原始图片，在获取图片时记得路径一定要正确。

div{ 
	background-color: blue;
	height: 400px;
	width: 400px;
	border: 20px solid black;
			
	border-image-source:url('乐.jpg');
	}

运行结果：[第二张图片显示了原始边框，浏览器使用F12开发者工具，使用箭头选中即可观看]

b、 border-image-slice

border-image-slice: number|%|fill;

图片边框偏移（即边框图像距顶部、右侧、底部、左侧的内偏移量），默认值100%。研究了两天终于真正理解了这个属性值，在查资料看视频的时候都介绍的很模糊。在这里你将很清晰的理解这个属性：

说明一下这是个人观点，如与你的理解有出入，只要你会用就行，不用管你自己和我理解的差别。

此处说的是一个参数的情况，两个参数和这个变化相似，就不详细说明了，感兴趣的然自己去操作吧。

1、是不是发现这图片怎么只在四个角上显示？

是的，你没看错，当你将图片导入进div里面时，图片默认将图片放置在4个角的位置，下面这张图才是你将图片导入时的原始状态，所有显示都是默认值。在这个属性的值，代表图像几何中心倒每个边的比例。代码在下面：

    height: 400px;
    width: 400px;
    background-color: blue;
    border: 25px solid red;
    border-image-source: url(乐.jpg);
    border-image-slice: 100%;  // 默认值
    border-image-width: 1; // 默认值
    border-image-outset: 0; // 默认值
    border-image-repeat: stretch; // 默认值

运行结果：

2、我将图片的大小设置为50%，进行下面的操作

border-image-width: 50%; 

// 这里的50%即是边框DIV的边框长度*50%，以div短边作为参考的对象

// 例如，高为50px;宽为20px，那么参考边就是宽，

运行结果：

在这里，你就会发现你导入的图片进入时并不是一张。

3、然后将偏移属性设置为50%，你会发现图片成为一张了。但是这还是四张图，只是每张图取了对应部分的四分之一，而且是每个位置对应角方向上四分之一。

4、然后再将偏移值变小到30%，你会发现图片已经看不出原有的形状了。随着图片偏移的其中的元素越来越少

5、总结：

此属性个人认为他是不算偏移，而是以四个角为基点的缩放图片。其实这只是其中的一部分情况，在查资料时所有人都喜欢说九宫格裁剪，即是九个位置：

如果你使用四个值的时候，你就能控制出9号区域以外的其他区域的变化情况。个人建议自己去实践操作呀！

c、border-image-width

border-image-width: number|%|auto;

主要设置图像边框的宽度，默认值1。

只有一个值的时候：

1、单取数值时：取值范围：0-10，0代表不显示，1代表默认值，10代表div最短边的50%，超过10的数值都将以10的样式显示。这里不是，半分比和像素。

2、取值百分比：最大不能超过50%，因为4个图片每个边对应div边框长度取值都将是50%，即是：2图片的边框之和等于div一个边框的长度。

下面的代码是两个取值的时候：

div{ 
	background-color: blue;
	height: 400px;
	width: 400px;
	border: 20px solid black;
	
	border-image-source:url('乐.jpg');
			/*border-image-slice: 50% 50%;*/
	border-image-width: 50px 50px;
		}

运行结果：

d、 border-image-outset

border-image-outset: length|number;

边框图像区域超出边框的量（即图片边框向外延伸的距离），默认值0。

div{
	background-color: blue;
	height: 400px;
	width: 400px;
	border: 20px solid black;
	
	border-image-source:url('乐.jpg');
	border-image-outset: 20px 10px;
}

运行结果：

e、border-image-repeat

border-image-repeat: stretch|repeat|round|initial|inherit;

图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)，默认值stretch。

            height: 400px;
			width: 400px;
			background-color: blue;
			border: 25px solid red;
			border-image-source:url('乐.jpg');
			border-image-slice: 20% 20% 20% 30%;
			border-image-width: 1;
			border-image-outset: 0;
			border-image-repeat: repeat;