Lazy loaded image
切角效果
字数 372阅读时长 1 分钟
2024-9-27
上次编辑时间
Sep 27, 2024 08:14 AM
创建时间
Feb 20, 2024 08:19 AM
来源

三角

效果图
notion image
 

垂直切角

一个切角

思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的背景色。
效果图
notion image

两个切角

效果图
notion image

四个切角

效果图
notion image
 

弧形切角

正方形弧形切四角

效果图
notion image
 

弧形边框选项卡

效果图
notion image
上一篇
美元加息降息
下一篇
CSS基础样式汇总