radial-gradient(circle at bottom right, transparent 10rpx, #FFF 0) bottom right, radial-gradient(circle at bottom left, #FFF, #FFF 0) bottom left if $positon == 'left' background radial-gradient(circle at top left, transparent 10rpx, #FFF 0) top left, radial-gradient(circle at top r...
径向渐变 radial-gradient 是一种沿径向渐变的颜色填充方式，它能够创建以圆心为中心，沿着半径扩散的颜色渐变效果。通过设置圆心位置、渐变角度以及颜色参数，可以轻松实现内圆角效果。在制作内圆角优惠券时，我们可以通过设定角上的渐变色为透明，从而模拟出圆角的效果。具体操作如下：使用 radial-gradient 时...
上面代码中渐变后的弧形在底部,所以用定位+bottom: 0; 这样就直接展示弧形出来了2、设置--circleValue的原因是因为,这几个值要一样2.1 渐变半径和盒子高度一样:是因为定位bottom设置为0,就可以直接看见了;2.2 从3.1中得知,渐变颜色的范围值必须一样,便于出现弧形3、注意:radial-gradient里面三个数值 <= 盒子高度...
总结radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),就是以容器的右上角为原点画圆,半径10px范围内是#fff颜色,半径大于10px范围内都是transparent颜色。 这样在右上角就形成了内倒角 同理radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px); 就不解...
实现方法有很多种,直接用切图、用 canvas 绘制、用个和背景相同颜色的圆盖在上面...不过,最佳的实现方式其实是利用 css 的径向渐变 radial-gradient 来制作。 最开始的版本,只通过一个 bottom 或 top 的参数来封装调用,只能满足上下四个角半圆切角的效果,满足的场景有限: ...