椭圆的CSS裁剪
<style>.myBox1 {
width: 200px;
height: 240px;
border-radius: 50%;
background: olive;
}
.myBox2 {
width: 200px;
height: 200px;
border-radius: 40%;
background: orange;
}
</style>
<p>当我们对正方形用50%的border-radius进行修整时，我们得到的结果是正圆。那么，如何获得一个椭圆或近似于椭圆的结果？我们先试一下如下两个思路：一个是border-radius值不变，正方形改为一定尺寸的矩形；另一个是正方形不变，border-radius值在50%上下浮动。</p><br><p>试看CSS代码：</p><p><br></p><p>.myBox1 {</p><p> width: 200px;</p><p> height: 240px;</p><p> border-radius: 50%;</p><p> background: olive;</p><p>}</p><p><br></p><p>效果如下：</p><p><br></p>
<div class="myBox1"></div>
<p><br></p><p>现在，我们用第二种思路，改变border-radius的值对正方形做修整。先看CSS代码：</p><p><br></p><p>.myBox2 {</p><p> width: 200px;</p><p> height: 200px;</p><p> border-radius: 40%;</p><p> background: orange;</p><p>}</p><p><br></p>
<div class="myBox2"></div>
<p><br></p><p>从效果上看，第一个思路得到的结果比较理想，第二个思路的结果不能令人满意。道理是这样：border-radius是对矩形的四个角进行修剪，当对长方形修剪时，如果角的弧度与各个边的中心刚好衔接，则会得到近似于椭圆的效果。而对正方形的统一修剪得到的是圆角的正方形，出不来椭圆效果，对各个角单独修剪，效果仍然忠实于高宽对等的体型，还是成不了椭圆。</p><p><br></p><p>所以，如果对一个可视实体进行取椭圆随意裁剪，需要用到 clip-path 方法，我们在下楼继续，敬请期待。</p>
本帖最后由 马黑黑 于 2022-1-24 18:39 编辑 <br /><br /><p>CSS中有一个 clip-path 属性，可对可视对象进行剪裁，其中，椭圆的剪裁语法如下：<br><br>
clip-path: ellipse();<br><br>
这是默认的椭圆形剪裁，xy半径都是 50%，椭圆圆心的xy坐标值也都在对象的中心（50% 50%）。可视元素应设定高宽尺寸，以下我们试着对一张 900×616 的实图强制设定大小为 400×300，并用 clip-path 默认方式对之剪裁：<br> </p>
<p style="text-align:center;"><img style="width:400px; height: 300px; clip-path:ellipse();" src="/data/attachment/forum/202201/24/180604vrvff4ve4bnfgsn1.jpg" alt=""><br> </p>
<p>clip-path:ellipse() 可以传入参数，语法如下：</p><p><br></p><p>clip-path:ellipse(x1 y1 <font color="#ff0000">at</font> x2 y2);</p><p><br></p><p>其中，x1 和 y1 分别是椭圆的 x 轴和 y 轴半径， x2 和 y2 则分别是椭圆圆心的 x 和 y 坐标值。换句话说，x1和y1是横向和纵向的尺寸，x2和y2是切割图片的中心点坐标值。另外，有两点需要注意：① 如果需要定义椭圆圆心（圆心可以省略，默认值是 50% 50%），at 关键字不能缺少，它表示椭圆圆心在什么位置；② x1y1x2y2的值可用 200px 和 20% 之类的数值表达法。</p><p><br></p><p>试看以下HTML语句会得到什么结果并尝试去领会各参数对裁剪结果的影响：</p><p><br></p><p><img style="width:400px; height:300px; clip-path:ellipse(100px 120px at 40% 45%);" src="/data/attachment/forum/202201/24/180604vrvff4ve4bnfgsn1.jpg" alt=""></p>
<p style="text-align:center;"><img style="width:400px; height:300px; clip-path:ellipse(100px 120px at 40% 45%);" src="/data/attachment/forum/202201/24/180604vrvff4ve4bnfgsn1.jpg" alt=""><br> </p>
<p>OK，主意领悟，细心体会，椭圆随意裁剪。</p> 反正我也不会，就看着舒服。{:4_173:} 樵歌 发表于 2022-1-24 19:38
反正我也不会，就看着舒服。
现在你用的是什么浏览器 x1 和 y1 分别是椭圆的 x 轴和 y 轴半径，也就是定义椭圆的长轴和短轴吧，当然可能x小于y。
看例子，对于 400×300的长方形取相同的xy百分比相同，自动长条形椭圆。如果不是取百分比，直接取值，就跟着长短轴的数值走了吧。 红影 发表于 2022-1-24 20:18
x1 和 y1 分别是椭圆的 x 轴和 y 轴半径，也就是定义椭圆的长轴和短轴吧，当然可能x小于y。
看例子，对于...
xy半径长短没有定性，相等时时园，x大于y时鸡蛋躺着，反之鸡蛋立着 对于一楼。如果仍然用radius 不停试验%的取值，能试出椭圆形状么？ 红影 发表于 2022-1-24 20:18
x1 和 y1 分别是椭圆的 x 轴和 y 轴半径，也就是定义椭圆的长轴和短轴吧，当然可能x小于y。
看例子，对于...
取值不好时会切不到椭圆，会有一边或两三边是直线的 红影 发表于 2022-1-24 20:21
对于一楼。如果仍然用radius 不停试验%的取值，能试出椭圆形状么？
理论上是可以的 <style>
.myBox2 {
width: 100px;
height: 100px;
border-radius: 53%;
background: orange;
}
</style>
<div class="myBox2"></div>
马黑黑 发表于 2022-1-24 20:22
理论上是可以的
好像不行，50%附近的数字我差不多都试过了，60以上基本没变化了。 红影 发表于 2022-1-24 20:29
好像不行，50%附近的数字我差不多都试过了，60以上基本没变化了。
那就不用它切椭圆 <p style="text-align:center;"><img style="width:400px; height:300px; clip-path:ellipse(50% 30% at 40% 50%);" src="/data/attachment/forum/202201/24/180604vrvff4ve4bnfgsn1.jpg" alt=""> 哈，我的at后面第一个值取40%，还以为会让x轴往上点，结果切掉一块。
（我思路首先是错的，想往上应该动最后的那个y值），不过少一块挺好玩，先留着。 红影 发表于 2022-1-24 20:41
哈，我的at后面第一个值取40%，还以为会让x轴往上点，结果切掉一块。
（我思路首先是错的，想往上应该动最 ...
偏左切割了。切的半径和圆心要配套。多做多体会 马黑黑 发表于 2022-1-24 20:20
xy半径长短没有定性，相等时时园，x大于y时鸡蛋躺着，反之鸡蛋立着
嗯嗯，看到例子能感觉到。 马黑黑 发表于 2022-1-24 20:35
那就不用它切椭圆
是的，用border-radius切正方形想得到椭圆太难实现了，还是clip-path的ellipse简单。 马黑黑 发表于 2022-1-24 21:12
偏左切割了。切的半径和圆心要配套。多做多体会
错有错着，倒是看到了奇怪的效果{:4_173:}
这4个数值调整还真挺有讲究的。 马黑黑 发表于 2022-1-24 20:22
取值不好时会切不到椭圆，会有一边或两三边是直线的
是的，我弄错个数值，已经看到效果了。 红影 发表于 2022-1-24 22:10
错有错着，倒是看到了奇怪的效果
这4个数值调整还真挺有讲究的。
嗯，数学基础也要好。几何思维往往难倒很多人哦。
页:
[1]
2