windows优化大师官网,贵阳关键词优化平台,wordpress读书笔记插件,wordpress_zh在平时开发中#xff0c;有时候会碰到下面这种“弧形”样式#xff0c;主要分为“内凹”和“外凸”两种类型#xff0c;如下 该如何实现呢#xff1f;或者想一下#xff0c;有哪些 CSS 属性和“弧形”有关#xff1f;下面介绍 3 种方式#xff0c;一起看看吧
一、borde…在平时开发中有时候会碰到下面这种“弧形”样式主要分为“内凹”和“外凸”两种类型如下 该如何实现呢或者想一下有哪些 CSS 属性和“弧形”有关下面介绍 3 种方式一起看看吧
一、border-radius
通常情况下我们用border-radius都是这样
div{border-radius: 20px;
}这样表示 4 个角都是圆角并且是标准的正圆 其实border-radius还支持斜杠的写法比如
div{border-radius: 20px / 10px;
}这表示圆角是一个x半径为20pxy半径为10px的椭圆如下 放大来看其实是这样的 进一步我们将x半径设置成50%这样就能得到一个完整的弧形了
div{border-radius: 50% / 20px;
}效果如下 这样就得到了“外凸”的弧形了是不是很容易
至于“内凹”弧形单纯的border-radius表示无能为力可以看接下来的方式
二、伪元素border-radius
这个其实大多数同学都能想到的方式一个矩形和一个椭圆组合起来不就是一个弧形卡片了吗原理非常简单 用代码实现就是
div{position: relative;
}
div::after{content: ;position: absolute;width: 100%;height: 20px;border-radius: 100%;background: inherit; /* 继承父级背景 */bottom: 0;left: 50%;transform: translate(-50%,50%);
}效果如下虚线表示伪元素的边缘 用伪元素的好处是可以随意控制弧度的大小和位置这个是border-radius所不能比的
通过overflow:hidden裁剪多余部分可以得到一个边缘比较“锋利”的弧形如下所示 另外用伪元素还能实现“内凹”的效果不过这需要反过来思考什么意思呢之前是给伪元素加的背景现在需要加在伪元素的外围这里用box-shadow实现原理如下 用代码实现就是
div{background: none;overflow: hidden;
}
div::after{content: ;background: none;box-shadow: 0 0 0 9999vh #FFE8A3; /*足够大的阴影*/z-index: -1;
}效果如下虚线表示伪元素的边缘 三、径向渐变
提到圆弧还可以想到径向渐变没错这里通过径向渐变也能轻易实现弧形卡片效果。
先来看“外凸”的其实思路和伪元素一样先拆分一个椭圆和一个矩形对应的就是径向渐变radial-gradient和线性渐变(linear-gradient)如下 用代码实现就是
div{background: radial-gradient(closest-side, #9747FF 100%,transparent 0) center bottom/100% 20px no-repeat,linear-gradient(#FFE8A3, #FFE8A3) 0 0/100% calc(100% - 10px) no-repeat;
}效果如下紫色部分是径向渐变 再来看“内凹”的弧形其实也和伪元素思路类似只不过这里需要绘制一个足够大的渐变从透明到纯色的径向渐变示意如下 调整好渐变中心点用代码实现就是
div{background: radial-gradient(50% 10px at center bottom, transparent 100%,#FFE8A3 0) center bottom;
}效果如下全部都是径向渐变绘制 当然你也可以随意改变径向的弧度和大小来实现各种不同的效果。
以上所有demo都可以查看以下在线链接 CSS radius layout (codepen.io)
四、优缺点总结
以上就是本文的全部内容了共介绍了 3 种不同的方式下面总结一下各自优缺点
border-radius 支持斜杠语法可以单独控制圆弧的x、y半径实现“外凸”圆弧最简单缺点是圆弧不能自定义弧度也不能实现“内凹”效果伪元素最符合常规思维可以解决以上问题缺点是需要占用伪元素略微麻烦渐变实现和伪元素拼接思路类似缺点是语法复杂需要熟练掌握渐变语法
学习资料点此下载
