CSS布局技巧 -- 内凹圆角
圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角
对于这种问题,很多人的反应都是采用CSS的伪类或者子元素的绝对定位来覆盖,但是这样做的后果就是被覆盖部分是不透明的。在不同样色的背景下,会出现非常突兀的覆盖元素,这样一来,视觉上将会非常难看,自适应行不强。
如果需要实现透明的效果,很多人又会说,切图!对,切图作为background-image是一个很好的解决方法。如果只能使用CSS属性来实现,是不是就懵逼了。。。
下边就来介绍一种使用纯CSS实现这种背景透明的内凹圆角效果
首先先介绍两个CSS3的属性
-
线性渐变 linear-gradient()
从该属性名中可以看出,这是一个生成颜色渐变图片的CSS方法。根据渐变基准方向(Gradient line)和颜色点,其中变化颜色点可以有多个。
示例:
// 两种颜色渐变 background: linear-gradient(90deg, #F6327C, #DF3DF0); // 两种以上颜色渐变,三个颜色点,在50%处有颜色#FF0,剩余的两个分别是起始点和结束点 background: linear-gradient(90deg, #F6327C, #FF0 50%, #DF3DF0);
渐变基准方向若使用 to left/to right/to top/to bottom 这样属性时,注意-webkit-等内核兼容性方面的语法的变化,细节可以查看文档
-
径向渐变 radial-gradient()
顾名思义,从文字可以明白所谓的径向渐变就是以某点为圆心,固定直径内颜色渐变。它的属性包含了起始位置、方向、颜色渐变梯度,径向梯度允许变化的形状和大小。详细内容可以查看文档
其语法为:
radial-gradient([[ circle || <length>] [at <position> ]?, | [ ellipse || [ <length> | <percentage> ]{2} [ at <position> ]?, | [ [ circle | ellipse] || <extent-keyword> ] [at <position> ]?, | at <position> ,]? <color-stop> [, <color-stop>] +) where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop> = <color> [ <percentage> | <length> ]?
示例:
// 椭圆渐变 background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%); // 固定半径的圆渐变 background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
言归正传,回到内凹圆角
首先主元素左右两边留有固定大小的margin值,然后使用圆角元素覆盖对应的margin区域。若圆角元素不大于2个,可以使用::after和::before两个伪类元素。若大于4个,如四角内凹元素,则采用自元素的绝对定位方式。
DOM元素结构(采用伪类):
<div class="main"></div>
CSS结构分以下2个方面来进行设计:
-
主体元素(背景颜色渐变)
.main { position: relative; width: 200px; height: 40px; margin: 0 5px; background: -webkit-linear-gradient(left, #F6327C, #DF3DF0); background: linear-gradient(to right, #F6327C, #DF3DF0); }
-
内凹圆角元素(使用伪类)
.main::before { position: absolute; content: ""; display: block; position: absolute; top: 0; left: -5px; width: 5px; height: 40px; border-radius: 2px 0 0 2px; background: -webkit-radial-gradient(10px at left,transparent 50%,#F6327C 50%); background: radial-gradient(10px at left,transparent 50%,#F6327C 50%); } .main::after { position: absolute; content: ""; display: block; position: absolute; top: 0; right: -5px; width: 5px; height: 40px; border-radius: 0 2px 2px 0; background: -webkit-radial-gradient(10px at right,transparent 50%,#F6327C 50%); background: radial-gradient(10px at right,transparent 50%,#F6327C 50%); }
根据以上代码就能够实现如图所示的带透明内凹圆角效果。