椭圆的CSS裁剪

马黑黑 · 发表于 2022-1-24 17:04

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

当我们对正方形用50%的border-radius进行修整时，我们得到的结果是正圆。那么，如何获得一个椭圆或近似于椭圆的结果？我们先试一下如下两个思路：一个是border-radius值不变，正方形改为一定尺寸的矩形；另一个是正方形不变，border-radius值在50%上下浮动。

试看CSS代码：

.myBox1 {

width: 200px;

height: 240px;

border-radius: 50%;

background: olive;

}

效果如下：

现在，我们用第二种思路，改变border-radius的值对正方形做修整。先看CSS代码：

.myBox2 {

width: 200px;

height: 200px;

border-radius: 40%;

background: orange;

}

从效果上看，第一个思路得到的结果比较理想，第二个思路的结果不能令人满意。道理是这样：border-radius是对矩形的四个角进行修剪，当对长方形修剪时，如果角的弧度与各个边的中心刚好衔接，则会得到近似于椭圆的效果。而对正方形的统一修剪得到的是圆角的正方形，出不来椭圆效果，对各个角单独修剪，效果仍然忠实于高宽对等的体型，还是成不了椭圆。

所以，如果对一个可视实体进行取椭圆随意裁剪，需要用到 clip-path 方法，我们在下楼继续，敬请期待。

马黑黑 · 发表于 2022-1-24 17:05

本帖最后由马黑黑于 2022-1-24 18:39 编辑

CSS中有一个 clip-path 属性，可对可视对象进行剪裁，其中，椭圆的剪裁语法如下：

clip-path: ellipse();

这是默认的椭圆形剪裁，xy半径都是 50%，椭圆圆心的xy坐标值也都在对象的中心（50% 50%）。可视元素应设定高宽尺寸，以下我们试着对一张 900×616 的实图强制设定大小为 400×300，并用 clip-path 默认方式对之剪裁：

clip-path:ellipse() 可以传入参数，语法如下：

clip-path:ellipse(x1 y1 at x2 y2);

其中，x1 和 y1 分别是椭圆的 x 轴和 y 轴半径， x2 和 y2 则分别是椭圆圆心的 x 和 y 坐标值。换句话说，x1和y1是横向和纵向的尺寸，x2和y2是切割图片的中心点坐标值。另外，有两点需要注意：① 如果需要定义椭圆圆心（圆心可以省略，默认值是 50% 50%），at 关键字不能缺少，它表示椭圆圆心在什么位置；② x1y1x2y2的值可用 200px 和 20% 之类的数值表达法。

试看以下HTML语句会得到什么结果并尝试去领会各参数对裁剪结果的影响：

OK，主意领悟，细心体会，椭圆随意裁剪。