前端基础学习之css-手写优惠券样式（radial-gradient）

最新推荐文章于 2024-04-29 22:57:18 发布

Endless Daydream233

最新推荐文章于 2024-04-29 22:57:18 发布

阅读量1.1k

点赞数 1

分类专栏：前端学习基础记录日常问题总结文章标签： 1024程序员节 css3 css html html5

本文链接：https://blog.csdn.net/gua222/article/details/109240736

版权

前端学习基础记录同时被 2 个专栏收录

57 篇文章 7 订阅

订阅专栏

日常问题总结

30 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了如何使用CSS的linear-gradient和radial-gradient属性创建优惠券的内凹样式。首先，通过实例演示了线性渐变的基本用法，包括不同方向和颜色停止点的设置。接着，讲解了径向渐变，通过指定形状、大小和位置创建出从中心向外扩散的渐变效果。最后，利用这些技巧组合出上下或左右内凹的优惠券背景样式，并提供了一种实现特定优惠券样式的代码示例。

摘要由CSDN通过智能技术生成

最近组内设计师总喜欢设计类似优惠券内凹的样式UI。因此，从头开始捋一遍这种优惠券的样式。如下：
在这里插入图片描述

1.linear-gradient 线性渐变

转前端没多久，写过的css属性还不是特别多，当刚接触画这个优惠券样式的时候，搜到radial-gradient这个写法两眼一抹黑，难以理解。但是linear-gradient 经常使用就比较熟悉呀。因线性渐变使用的频率要比径向渐变高的多，因此在学习径向渐变之前，可以先再熟悉一遍线性渐变，依次类推再看径向渐变就简单的多。

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从下到上渐变。

使用方法：background-image: linear-gradient(direction, color-stop1, color-stop2, …);

demo:

最常用的简单的从左到右线性渐变（默认是从上到下的渐变方向，旋转90度，刚好从左到右。也可以使用 to right）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.line {
		    height: 100px;
		    width: 200px;
		    /* 90deg渐变轴，默认从上到下 */		
		    background-image: linear-gradient(90deg, red, blue);
		}
	</style>
</head>
<body>
	<div class="line">从左到右的红到蓝渐变</div>
</body>
</html>

45度斜着线性渐变

 /*红色20%开始渐变*/ 
background-image: linear-gradient(45deg, red 20%, blue 80%);

浓缩渐变范围，直至重合，形成一个红蓝分隔的两个色块

 background-image: linear-gradient(90deg, red 50%, blue 50%);

颜色可以设置透明色的，transparent, 将红色改成透明色，可以看到只有蓝色的色块了

 background-image: linear-gradient(90deg, transparent 50%, blue 50%);

2.radial-gradient 径向渐变

由线性渐变来推理径向渐变易于理解。

radial-gradient() 函数用径向渐变创建 “图像”。
径向渐变由中心点定义。
为了创建径向渐变你必须设置两个终止色。

使用方法：background-image: radial-gradient(shape size at position, start-color, …, last-color);

对比线性渐变，径向渐变多了圆的类型 shape、渐变大小类似圆的半径 size、渐变位置position.

demo:

左上径向渐变

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
		/* 左上 */
		.raidal1 {
			margin-top: 20px;
		    height: 100px;
		    width: 100px;
		    background:radial-gradient(200px at left top,transparent 50%,blue 50%);
		}
	</style>
</head>
<body>
	<div class='raidal1'></div>
</body>
</html>

右上径向渐变

background:radial-gradient(200px at right top,transparent 50%,skyblue 50%);

右下径向渐变

background:radial-gradient(200px at right bottom,transparent 50%,skyblue 50%);

左下径向渐变

background:radial-gradient(200px at left bottom,transparent 50%,skyblue 50%);

稍稍缩短透明的半径长，其实就可以看见优惠券的一部分样子了

background:radial-gradient(circle at left bottom, transparent 10px, #28A4F2 0)

不均等半径渐变（类椭圆，两个半径长）

 background:radial-gradient(200px 300px at left top,transparent 50%,skyblue 50%);

通过左上、右上、左下、右下拼出上下内凹的优惠券样式背景图

在这里插入图片描述

.raidal1 {
			width: 250px;
		    height: 100px;
		    background: radial-gradient(circle at right top, transparent 10px,  skyblue 0) top left / 60px 51% no-repeat,
		      radial-gradient(circle at right bottom, transparent 10px,  skyblue 0) bottom left /60px 51% no-repeat,
		      radial-gradient(circle at left top, transparent 10px, orange 0) top right /190px 51% no-repeat,
		      radial-gradient(circle at left bottom, transparent 10px, orange 0) bottom right /190px 51% no-repeat;
		    filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3));
		}

通过左上、右上、左下、右下拼出左右内凹的优惠券样式背景图

background: radial-gradient(circle at left bottom, transparent 10px, skyblue 0) top left /60px 30px no-repeat,
		                radial-gradient(circle at right bottom, transparent 10px, skyblue 0) top right /60px 30px no-repeat,
		                 radial-gradient(circle at left top, transparent 10px, orange 0) bottom left /60px 90px no-repeat,
		                 radial-gradient(circle at right top, transparent 10px, orange 0) bottom right /60px 90px no-repeat;

常用的白色优惠券背景（只要改变不透明部分的颜色即可）

background: radial-gradient(circle at left bottom, transparent 10px, #fff 0) top left /60px 30px no-repeat,
		                radial-gradient(circle at right bottom, transparent 10px, #fff 0) top right /60px 30px no-repeat,
		                 radial-gradient(circle at left top, transparent 10px, #fff 0) bottom left /60px 90px no-repeat,
		                 radial-gradient(circle at right top, transparent 10px, #fff 0) bottom right /60px 90px no-repeat;