网站前端之css制作卡券缺圆角 - 方维网络
400-800-9385
网站建设资讯详细

网站前端之css制作卡券缺圆角

发表日期:2020-10-29 09:04:44   作者来源:林志平   浏览:2603   标签:网站前端制作    
网站的建立,往往伴随着诸多的功能需求,制作网站的目的是什么?或者是因为业务的宣传,为了提升业绩,抑或是想要表达什么观点、理念,传递什么价值。设计出来的网站能使浏览者在浏览的过程中能够快速、便捷的获取到想要的信息,并带来愉悦的体验。设计中的字体字号大小,内容的排版,甚至是内容之间的间距都有设定。那么,还原设计稿就很重要。例如上次提到的用css制作的小图标,最近工作中,遇到一个需要制作卡券的效果。
然而平时常见的是圆角用border-radius,可以设置成圆角边框、绘制成圆、半圆的各种圆的图形。

CSS代码

那么类似这样的缺圆角就可以用background: radial-gradient 背景色径向渐变来制作。

缺角方形

首页,先制作一个例如宽高200px的图形,填充颜色,然后在此图形上用背景色径向渐变创建一个圆,调整圆的位置到y1的方角位置,形成一个凹陷的圆角。就能形成上图的边角凹陷的图形。

HTML代码

那么需要两个并排形成的类似卡券的图形,则多加制作一个相同宽高的图形为y2.
Y2的样式设置为下图

CSS代码2

但是会发现,两个图形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是半径。
如没特殊注明,文章均为方维网络原创,转载请注明来自http://www.cdpcwl.com/news/5880.html