css3中使用clip-path将图片裁剪成不规则图形添加边框

2023-02-20 15:22:02html-css08

css3中使用clip-path将图片裁剪成不规则图形添加边框,第1张

img{

-webkit-clip-path: polygon(0 0,100% 0,100% 40px,145px 40px,130px 60px,115px 40px,0 40px,0 0)

clip-path: polygon(0 0,100% 0,100% 40px,145px 40px,130px 60px,115px 40px,0 40px,0 0)

}

border-image于此类似，border-image包括图片，剪裁位置（与background位置一样，也是数值，也支持百分值），重复性。例如：border-image:url(border.png) 27 repeat，指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)。试着对比background，这有助于border-image属性的记忆。

border-image的参数就是上面提到的三个：图片，剪裁位置，重复性。

1、图片(border-image-source)

与CSS2中background-image属性一样，border-image的背景图使用url()调用，图片可以是相对路径或是绝对路径，也可以不使用图片，即border-image:none

2、图片剪裁位置(border-image-slice)

此参数特点比较鲜明：

1、没有单位，专指像素。这类似于flash的as脚本，舞台高宽，影片剪辑大小，位移直接就是一个数值，没有单位，因为默认单位就是像素(px)了。例如：border-image:url(border.png) 27 repeat这里的27专指27像素。

2、支持百分比值，百分比值大小事相对于边框图片而言，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。

3、剪裁特性。如果您对CSS中clip属性(clip:rect(auto, auto, auto, auto))比较了解，则这里理解就会轻松些。clip可以说是CSS中一个明目张胆的剪裁属性，而此处的属性虽然表意上不是剪裁，但是在border-image效果的实现上来说，就好像是个剪裁工具，把边框图片四分五裂，再重新安置，变形。其有1~4个参数，其方位规则符合CSS普遍的方位规则（与margin，padding等或border-width一致），上右下左顺时针，再赋予剪裁的含义，举个简单的例子，前面提到，支持百分比宽度，所以这里“30% 35% 40% 30%的”示意可以用下图表示：

看图说话就是，离图片上部30%的地方剪裁一下，在右边35%的地方剪裁一下，在离底部40%的地方裁剪一下，在距左边30%的地方也剪裁一下。于是总共对图片进行了“四刀切”，形成了九个分离的区域，这就是九宫格，这是下面深入讲解border-image的基础。

3、重复性(border-image-repeat)

这里的重复性有别于background的背景重复，差别较大。background图片就是重复，不重复，水平重复，垂直重复，总之就是围绕repeat（重复）这个词打转，一家独大。而对于border-image，可谓是三足鼎立，repeat（重复）只是其中之一，其余两个是round（平铺）和stretch（拉伸）。其中，stretch是默认值。

参数0~2个，0则使用默认值 – stretch，例如：border-image:url(border.png) 30% 40%就等同于border-image:url(border.png) 30% 40% stretch stretch；1则表示水平方向及垂直方向均使用此参数；2个参数的话则第一个参数表水平方向，第二个参数表示垂直方向。例如：border-image:url(border.png) 30% 40%就等同于border-image:url(border.png) 30% 40% round repeat表示水平方向round（平铺），垂直方向repeat（重复），至于何为平铺何为重复下面会深入讲解。

三、深入理解border-image的宽度和展示方式

分开理解border-image的宽度或是展示方式其实不太难的，关键是这两者结合使用时候的含义，需要花一定的功夫的理解。

帮助理解的九宫格模型

何为九宫格？为什么我们需要九宫格帮助理解？

“九宫格”是我国书法史上临帖写仿的一种界格，又叫“九方格”，即在纸上画出若干大方框，再于每个方框内分出九个小方格，以便对照法帖范字的笔画部位进行练字。在本文，“九宫格”就专指由九个方格形成的矩形布局，例如左图就是一个很简单的数字九宫格。

border-image的数值参数其实是用来剪裁边框图片的，正好“哗哗四刀”切出了个九宫格的模型，所以，有意或无意，巧合还是必然，我们需要用到九宫格模型帮助我们理解border-image的绘制原理。下面这张图是本文非常重要的基本的示意图，因为这是张具有代表性的九宫格图案(27*3)*(27*3)。

2021年2月19日学习笔记

【椭圆】

【半椭圆】

沿纵轴对称，如果传4个值，分别从左上角开始以顺时针应用到各个拐角，如果提供3个值，意味着第4个值与第2个值相同

4个角还可以有不同的水平和垂直半径，在斜杠前指定1~4个值，在斜杠后指定1~4个值

当border-radius: 10px / 5px 20px时，相当于

border-radius: 10px 10px 10px 10px / 5px 20px 5px 20px

【四分之一椭圆】

其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角

【扩展练习】

【平行四边形】

【平行四边形--伪元素】