[分享]css如何设置倒圆角

发布于 2024-08-30 23:21:10

377

可以这样写
background: radial-gradient(circle at 0% 0%, #fff 8px, transparent 0) top left #FFFFFF;
这个Vue模板函数的功能是设置元素的背景为一个径向渐变效果。具体来说，这个渐变效果从左上角开始，首先显示一个8像素宽的白色圆圈，然后是透明的，渐变的终点颜色也是透明的。这个背景被设置在左上角，并且背景颜色为白色。(AI生成的描述)
如果想要改变倒圆角的位置,只需要改变后面的位置参数就可以,举个例子
改为右下角是这样的:
background: radial-gradient(circle at 100% 100%, #fff 8px, transparent 0) bottom right #FFFFFF;
下面是测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div style="height: 100px;width: 100px; background: radial-gradient(circle at 100% 100%, #ffffff 20px, transparent 0) bottom right #ff0000;
 ">

</div>
</body>

</html>

运行结果就是这样

css

一个月内的热帖推荐

鸟云

Lv.1普通用户

275 帖子	20 小组	225 积分

275

帖子

小组

225

积分

关注作者

发帖	回复	分享

赞助商广告

本组热帖