网站的建□□□立，往往伴随□□□着诸多的◆功能需求，制作网站◆的目的是◎什么？或者是因□□□为业务的□□□□宣传，为了提升▼业绩，抑或是想□□□□要表达什□□么观点、理念，传递什么◎价值。设计出来□□□的网站能◥使浏览者□□在浏览的□□□过程中能◆够快速、便捷的获□□□□取到想要□□的信息，并带来愉◣悦的体验。设计中的□□字体字号□□大小，内容的排◇版，甚至是内·容之间的□□□间距都有□□□设定。那么，还原设计□□□□稿就很重□□□要。例如上次□□□提到的用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是半径。