网站前端之css制作卡券缺圆角
然而平时常见的是圆角用border-radius,可以设置成圆角边框、绘制成圆、半圆的各种圆的图形。 那么类似这样的缺圆角就可以用background: radial-gradient 背景色径向渐变来制作。 首页,先制作一个例如宽高200px的图形,填充颜色,然后在此图形上用背景色径向渐变创建一个圆,调整圆的位置到y1的方角位置,形成一个凹陷的圆角。就能形成上图的边角凹陷的图形。 那么需要两个并排形成的类似卡券的图形,则多加制作一个相同宽高的图形为y2.
Y2的样式设置为下图 但是会发现,两个图形y1和y2上没有看到缺圆角,是因为background默认是100%和repeat导致的, 将y1和y2设置background-size: 100% 50%; background-repeat: no-repeat;效果就出来了。如下图: 关于background: radial-gradient的一些参数说明:circle 和ellipse (默认的)分别是圆形的线性渐变和椭圆形的线性渐变,at是位于,right top、right bottom、top left、bottom left是一些定义渐变的位置。Transparent是表示以父元素为准的背景颜色,8px是半径。