AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

利用径向渐变radial-gradient封装stylus、sass函数制作半圆透明切角效果

2023-11-16 76
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端项目中为了制作半圆切角效果，一般多用于优惠券类似效果，最开始的版本，只通过一个 bottom 或 top 的参数来封装调用，只能满足上下四个角半圆切角的效果，满足的场景有限

前端项目中为了制作半圆切角效果，一般多用于优惠券类似效果：
1.png

最开始的版本，只通过一个 bottom 或 top 的参数来封装调用，只能满足上下四个角半圆切角的效果，满足的场景有限：

$radial-gradient-half-circle($positon = 'bottom', $size = 16rpx, $bg = skyblue)
  if $positon == 'bottom'
    background radial-gradient(circle at top left, $bg, $bg 0) top left,
    radial-gradient(circle at top right, $bg, $bg 0) top right,
    radial-gradient(circle at bottom right, transparent $size, $bg 0) bottom right,
    radial-gradient(circle at bottom left, transparent $size, $bg 0) bottom left
  if $positon == 'top'
    background radial-gradient(circle at top left, transparent $size, $bg 0) top left,
    radial-gradient(circle at top right, transparent $size, $bg 0) top right,
    radial-gradient(circle at bottom right, $bg, $bg 0) bottom right,
    radial-gradient(circle at bottom left, $bg, $bg 0) bottom left
  background-size 50% 50%
  background-repeat no-repeat

然后就想能不能尝试提取更多的参数，满足更多的场景，比如可以设置具体哪个角、大小和背景色。

写法一：失败

每一行末尾加了逗号会报错 Failed to compile...unexpected "else"，如果去掉逗号后面的 if else 又都没有效果：

$radial-gradient-half-circle(
  $top-left = false, // 左上角是否为透明半圆
  $top-right = false, // 右上角是否为透明半圆
  $bottom-right = false, // 右下角是否为透明半圆
  $bottom-left = false, // 左下角是否为透明半圆
  $size = 16rpx, // 半圆半径
  $bg = #FFF, // 背景色
)
  if $top-left
    background radial-gradient(circle at top left, transparent $size, $bg 0) top left,
  else
    background radial-gradient(circle at top left, $bg, $bg 0) top left,
  if $top-right
    radial-gradient(circle at top right, transparent $size, $bg 0) top right,
  else
    radial-gradient(circle at top right, $bg, $bg 0) top right,
  if $bottom-right
    radial-gradient(circle at bottom right, transparent $size, $bg 0) bottom right,
  else
    radial-gradient(circle at bottom right, $bg, $bg 0) bottom right,
  if $bottom-left
    radial-gradient(circle at bottom left, transparent $size, $bg 0) bottom left
  else
    radial-gradient(circle at bottom left, $bg, $bg 0) bottom left
  background-size 50% 50%
  background-repeat no-repeat

写法二：成功

只保留第一个 if else，后面的全部改成三元表达式，注意要逗号前面的要用括号括起来，否则也会报错，可以正常编译，但是后面的三元表达式重复写了两遍，不够简洁和优雅：

$radial-gradient-half-circle(
  $top-left = false, // 左上角是否为透明半圆
  $top-right = false, // 右上角是否为透明半圆
  $bottom-right = false, // 右下角是否为透明半圆
  $bottom-left = false, // 左下角是否为透明半圆
  $size = 16rpx, // 半圆半径
  $bg = #FFF, // 背景色
)
  if $top-left
    background radial-gradient(circle at top left, transparent $size, $bg 0) top left,
    ($top-right ? radial-gradient(circle at top right, transparent $size, $bg 0) top right : radial-gradient(circle at top right, $bg, $bg 0) top right),
    ($bottom-right ? radial-gradient(circle at bottom right, transparent $size, $bg 0) bottom right : radial-gradient(circle at bottom right, $bg, $bg 0) bottom right),
    $bottom-left ? radial-gradient(circle at bottom left, transparent $size, $bg 0) bottom left : radial-gradient(circle at bottom left, $bg, $bg 0) bottom left
  else
    background radial-gradient(circle at top left, $bg, $bg 0) top left,
    ($top-right ? radial-gradient(circle at top right, transparent $size, $bg 0) top right : radial-gradient(circle at top right, $bg, $bg 0) top right),
    ($bottom-right ? radial-gradient(circle at bottom right, transparent $size, $bg 0) bottom right : radial-gradient(circle at bottom right, $bg, $bg 0) bottom right),
    $bottom-left ? radial-gradient(circle at bottom left, transparent $size, $bg 0) bottom left : radial-gradient(circle at bottom left, $bg, $bg 0) bottom left
  background-size 50% 50%
  background-repeat no-repeat

写法三：成功

在上面的版本中全部改成三元表达式，更加简洁，可以正常编译：

$radial-gradient-half-circle(
  $top-left = false, // 左上角是否为透明半圆
  $top-right = false, // 右上角是否为透明半圆
  $bottom-right = false, // 右下角是否为透明半圆
  $bottom-left = false, // 左下角是否为透明半圆
  $size = 16rpx, // 半圆半径
  $bg = #FFF, // 背景色
)
  background ($top-left ? radial-gradient(circle at top left, transparent $size, $bg 0) top left : radial-gradient(circle at top left, $bg, $bg 0) top left),
  ($top-right ? radial-gradient(circle at top right, transparent $size, $bg 0) top right : radial-gradient(circle at top right, $bg, $bg 0) top right),
  ($bottom-right ? radial-gradient(circle at bottom right, transparent $size, $bg 0) bottom right : radial-gradient(circle at bottom right, $bg, $bg 0) bottom right),
  $bottom-left ? radial-gradient(circle at bottom left, transparent $size, $bg 0) bottom left : radial-gradient(circle at bottom left, $bg, $bg 0) bottom left
  background-size 50% 50%
  background-repeat no-repeat

写法四：终极版，成功

为了满足更多的场景，提供更多的参数，满足每个角可以单独设置大小和颜色：

$radial-gradient-half-circle(
  $top-left = false, // 左上角是否为透明半圆
  $top-right = false, // 右上角是否为透明半圆
  $bottom-right = false, // 右下角是否为透明半圆
  $bottom-left = false, // 左下角是否为透明半圆
  $size-top-left = 16rpx, // 左上角半圆半径
  $size-top-right = 16rpx, // 右上角半圆半径
  $size-bottom-right = 16rpx, // 右下角半圆半径
  $size-bottom-left = 16rpx, // 左下角半圆半径
  $bg-top-left = #FFF, // 左上角背景色
  $bg-top-right = #FFF, // 右上角背景色
  $bg-bottom-right = #FFF, // 右下角背景色
  $bg-bottom-left = #FFF, // 左下角背景色
)
  background ($top-left ? radial-gradient(circle at top left, transparent $size-top-left, $bg-top-left 0) top left : radial-gradient(circle at top left, $bg-top-left, $bg-top-left 0) top left),
  ($top-right ? radial-gradient(circle at top right, transparent $size-top-right, $bg-top-right 0) top right : radial-gradient(circle at top right, $bg-top-right, $bg-top-right 0) top right),
  ($bottom-right ? radial-gradient(circle at bottom right, transparent $size-bottom-right, $bg-bottom-right 0) bottom right : radial-gradient(circle at bottom right, $bg-bottom-right, $bg-bottom-right 0) bottom right),
  $bottom-left ? radial-gradient(circle at bottom left, transparent $size-bottom-left, $bg-bottom-left 0) bottom left : radial-gradient(circle at bottom left, $bg-bottom-left, $bg-bottom-left 0) bottom left
  background-size 50% 50%
  background-repeat no-repeat

可以自定义每个角的大小和背景色，不传会取默认值，使用示例：$radial-gradient-half-circle(true, true, true, true, 30rpx, , , 60rpx, pink, , blue, red)
2.png

对应的 sass 版本

sass 封装函数需要用到 @mixin，使用时需要用 @include，注意 sass 中不能像 stylus 一样直接用三元表达式，需要用 if 函数：if(expression, 第一个参数为 true 时的 value, 第一个参数为 false 时的 value)。

还有就是中间的参数不能像 stylus 一样可以直接省略，sass 中参数连续写多个逗号会报错，所以只能省略后面的参数。

// 用径向渐变制作半圆透明切角效果，可以自定义每个角的大小、颜色
@mixin radial-gradient-half-circle(
  $top-left: false, // 左上角是否为透明半圆
  $top-right: false, // 右上角是否为透明半圆
  $bottom-right: false, // 右下角是否为透明半圆
  $bottom-left: false, // 左下角是否为透明半圆
  $size-top-left: 16px, // 左上角半圆半径
  $size-top-right: 16px, // 右上角半圆半径
  $size-bottom-right: 16px, // 右下角半圆半径
  $size-bottom-left: 16px, // 左下角半圆半径
  $bg-top-left: #FFF, // 左上角背景色
  $bg-top-right: #FFF, // 右上角背景色
  $bg-bottom-right: #FFF, // 右下角背景色
  $bg-bottom-left: #FFF, // 左下角背景色
) {
   
   
  background: if($top-left, radial-gradient(circle at top left, transparent $size-top-left, $bg-top-left 0) top left, radial-gradient(circle at top left, $bg-top-left, $bg-top-left 0) top left),
  if($top-right, radial-gradient(circle at top right, transparent $size-top-right, $bg-top-right 0) top right, radial-gradient(circle at top right, $bg-top-right, $bg-top-right 0) top right),
  if($bottom-right, radial-gradient(circle at bottom right, transparent $size-bottom-right, $bg-bottom-right 0) bottom right, radial-gradient(circle at bottom right, $bg-bottom-right, $bg-bottom-right 0) bottom right),
  if($bottom-left, radial-gradient(circle at bottom left, transparent $size-bottom-left, $bg-bottom-left 0) bottom left, radial-gradient(circle at bottom left, $bg-bottom-left, $bg-bottom-left 0) bottom left);
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

// 使用示例
.test {
   
   
  @include radial-gradient-half-circle(true, true, true, true, 30px, 40px, 50px, 60px, pink, yellow, green);
}

注意

  • 手机屏幕显示问题：注意背景色大小 background-size 可以比 50% 多设置点，比如设置成 52%，防止在部分手机屏幕上看着中间会有一条缝隙
文章标签：
前端开发
cafehaus
目录
相关文章
微芒不朽
|
6月前
|
前端开发 容器
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（上）
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
微芒不朽
145 1
微芒不朽
|
6月前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
微芒不朽
178 1
微芒不朽
|
6月前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（中）
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
微芒不朽
164 1
hhzz
|
6月前
|
前端开发
CSS圆角大杀器，使用滤镜构建圆角及波浪效果
CSS圆角大杀器，使用滤镜构建圆角及波浪效果
hhzz
69 0
这我可不懂
|
前端开发
CSS 高阶小技巧 - 角向渐变的妙用！
CSS 高阶小技巧 - 角向渐变的妙用！
这我可不懂
105 0
南城FE
|
前端开发
通过构建背景图学习CSS径向渐变
通过构建背景图学习CSS径向渐变
南城FE
65 0
肥晨
|
前端开发 JavaScript
CSS奇思妙想之-利用CSS裁剪（clip-path）完成各种图形
CSS奇思妙想之-利用CSS裁剪（clip-path）完成各种图形
肥晨
260 1
CSS奇思妙想之-利用CSS裁剪（clip-path）完成各种图形
jcLee95
|
Web App开发 前端开发 JavaScript
基于 CSS 的变换与动画技术
本文介绍基于 CSS 的变换与动画技术
jcLee95
101 0
南京沂洲信息咨询有限公司
|
前端开发
CSS 03 线性渐变、径向渐变与重复性渐变
linear-gradient( [ || ,]? , [,]* ) < angle >:用角度指定渐变方向或者角度 to left to right to top to bottom <div class='ceng'> </div> .ceng{ width:260px; height:200px; border:1px solid black; background-image:linear-gradient(orange,green); /*从橘红色向绿色渐变，从上到下*/ background-image:linear-g
南京沂洲信息咨询有限公司
112 0
微芒不朽
|
前端开发 容器
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(上)
一直对渐变背景这块比较感兴趣，但是因为每天加班实在太忙了，任务也比较多。所以就只能下班的时间研究渐变背景这方面的知识，一来满足了自己的好奇心，二来可以更加了解这方面的知识。
微芒不朽
423 0
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(上)