CSS3实现内凹圆角的实例代码

最新推荐文章于 2023-07-28 17:42:54 发布

原创

最新推荐文章于 2023-07-28 17:42:54 发布 · 1.8k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了如何使用CSS3的径向渐变来创建背景透明的内凹圆角，避免了传统遮盖方法的局限性。通过调整渐变范围和颜色，实现了自适应性强的内凹圆角效果。并提到了应用技巧，如伪元素、绝对定位等，以及如何创建椭圆形的内凹圆角。

圆角，大家一定都会做，border-radius, 内凹圆角如何实现？

可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。说白了就是遮盖的那部分不透明以后，自适应性不强。

这里介绍一个用径向渐变实现的内凹圆角，可以解决上述问题。可以用 CSS 生成一个背景透明的内凹圆角。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

1. 基本线性渐变

div {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red,blue);
}
<div>从左到右的红到蓝渐变</div>

2. 加百分比调整渐变范围

 div {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red 20%,blue 80%);
}
<div></div>

3. 浓缩渐变范围，直至重合，形成一个红蓝分隔的两个色块

 div {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red 50%,blue 50%);
}
 <div></div>

4. 颜色是可以设置透明色的，transparent, 将红色改成透明色，可以看到只有蓝色的色块了。

 div {
 height:100px;
 width:200px;
 background-image:lin