主页/ 电商学院/网站开发/网站前端之css制作卡券缺圆角

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

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

优加商学院

APP开发微信小程序开发网站开发
您好,直接联系技术沟通需求
扫码添加我的微信,直谈需求
非工作时间技术回复慢请谅解
咨询更详细需求
提交信息后我们会第一时间与你取得联系,请大致把需求填写在"咨询内容"里。
姓名
手机
咨询内容
立即提交