Question

我正在尝试将圆形剪辑应用到我的照片

<style>
.circle {
  -webkit-clip-path: circle(50%,50%,10%);
  clip-path: circle(50%,50%,10%);
};

</style>
</head>

<body>
<img src="image1.jpg" width="1024" height="768" alt="" class="circle"/>
</body>

这简直不起作用

＆＃13;

.circle {
  -webkit-clip-path: circle(50%,50%,10%);
  clip-path: circle(50%,50%,10%);
};

＆＃13;

<img src="http://cp91279.biography.com/Leonardo-da-Vinci_A-Divine-Mind_HD_768x432-16x9.jpg" width="1024" height="768" alt="" class="circle"/>

＆＃13;

我不想使用任何border-radius！

Answer 1

圆圈语法似乎更像是

clip-path: circle(50% at 50% 10%);

所以改为

.circle {
  -webkit-clip-path: circle(50% at 50% 10%);
  clip-path: circle(50% at 50% 10%);
}

小提琴here

我在MDN上发现了它here

circle（[<shape-radius>] [at <position>]）shape-radius参数是圆的半径。 position参数定义了中心圆的一个点，与background-position具有相同的语法（详见背景位置）。

在webplatform.org上找到了很好的解释资源here

如何使用clip-path创建一个简单的圆形掩码CSS3？

1 个答案: