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

鸟云Lv.1普通用户

2024-08-30 23:21:10

143

可以这样写
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>

运行结果就是这样

鸟云

52 天前

签名 : 143 0

免责声明 : 用户发表言论，签名内容均为会员个人观点，并不代表花趣站长网立场！