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

2023-03-05 分类：网站建设

网站的建立，往往伴随着诸多的功能需求，制作网站的目的是什么？或者是因为业务的宣传，为了提升业绩，抑或是想要表达什么观点、理念，传递什么价值。设计出来的网站能使浏览者在浏览的过程中能够快速、便捷的获取到想要的信息，并带来愉悦的体验。设计中的字体字号大小，内容的排版，甚至是内容之间的间距都有设定。那么，还原设计稿就很重要。例如上次提到的用css制作的小图标，最近工作中，遇到一个需要制作卡券的效果。

CSS代码

然而平时常见的是圆角用border-radius，可以设置成圆角边框、绘制成圆、半圆的各种圆的图形。

缺角方形

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

HTML代码

首页，先制作一个例如宽高200px的图形，填充颜色，然后在此图形上用背景色径向渐变创建一个圆，调整圆的位置到y1的方角位置，形成一个凹陷的圆角。就能形成上图的边角凹陷的图形。
那么需要两个并排形成的类似卡券的图形，则多加制作一个相同宽高的图形为y2.

CSS代码2

Y2的样式设置为下图

双缺角图像

但是会发现，两个图形y1和y2上没有看到缺圆角，是因为background默认是100%和repeat导致的，将y1和y2设置background-size: 100% 50%;background-repeat: no-repeat;效果就出来了。如下图：

网站标题：网站前端之css制作卡券缺圆角
分享链接：https://www.cdcxhl.com/news/241743.html

成都网站建设公司_创新互联，为您提供品牌网站建设、外贸建站、搜索引擎优化、网站收录、响应式网站、营销型网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容

成都网站建设公司

网站建设知识