html如何给盒子填充径向渐变,CSS 中使用径向渐变实现卡券效果

最新推荐文章于 2024-01-14 22:38:05 发布
最新推荐文章于 2024-01-14 22:38:05 发布
阅读量241 收藏
点赞数
文章标签： html如何给盒子填充径向渐变

前几天，同事接到一个积分商城项目，其中有一个卡券兑换礼品功能。我想了一会没什么好的思路，就忙自己的项目去了。但想到以后自己可能也会遇到类似的需求，所以周末学习整理了下几种卡券效果的实现。

常见的卡券样式如下：

ff9555d9637e1b5f40f48c4572d903e1.png

使用伪元素实现(Less 版本)

8b9a0c8fe8e377c04af05c04510f370c.png

ticket.less

.ordinary-mixins-ticket-horizontal(@width,@height,@r,@top, @color) {

position: relative;

box-sizing: border-box;

padding: 0 @r;

width: @width;

height: @height;

background-clip: content-box;

background-color: @color;

&::before {

position: absolute;

top: 0;

left: 0;

content: "";

display: block;

width: @r + 1px;

height: 100%;

background: radial-gradient(@r circle at left @top, transparent @r, @color @r + 1px);

}

&::after {

position: absolute;

top: 0;

right: 0;

content: "";

display: block;

//这里的 @r + 1px 是为了避免某些百分百比缩放页面时，出现空隙

width: @r + 1px;

height: 100%;

//这里的 @r + 1px 是为了防止出现锯齿

background: radial-gradient(@r circle at right @top, transparent @r, @color @r + 1px);

}

}

.parent {

.ordinary-mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28);

}

.child {

line-height: 200px;

}

App.js

import React from 'react';

import './App.css';

import './ticket.less';

function App() {

return (

{

display: "flex",

justifyContent: "center",

alignItems: "center",

height: 600

}

}>

666

);

}

export default App;

升级版样式一(Less 版本)

f76f85efdfe23051fe9f42f7c0b5fc65.png

.mixins-ticket-vertical(@width, @height, @r, @left, @l-color, @r-color) {

width: @width;

height: @height;

// @left - 1px 是为了避免某些百分百比缩放页面时，出现空隙

// @r + 1px 是为了防止出现锯齿

// 51% 是为了防止出现元素中间会有一小段空白区域的情况

background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) @left - 1px top ~'/' 100% 51% no-repeat,

radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) @left - 1px bottom ~'/' 100% 51% no-repeat,

radial-gradient(circle at right top, transparent @r, @r-color @r + 1px ) -(@width - @left) top ~'/' 100% 51% no-repeat,

radial-gradient(circle at right bottom , transparent @r, @r-color @r + 1px ) -(@width - @left) bottom ~'/' 100% 51% no-repeat;

filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));

}

.mixins-ticket-vertical-two(@width, @height, @r, @left, @l-color, @r-color) {

width: @width;

height: @height;

// @left + 1px 是为了避免某些百分百比缩放页面时，出现空隙

// @r + 1px 是为了防止出现锯齿

// 51% 是为了防止出现元素中间会有一小段空白区域的情况

background: radial-gradient(circle at left top, transparent @r, @r-color @r + 1px) right top ~'/' (@width - @left) 51% no-repeat,

radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) right bottom ~'/' (@width - @left) 51% no-repeat,

radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) left top ~'/' @left + 1px 51% no-repeat,

radial-gradient(circle at right bottom, transparent @r, @l-color @r + 1px) left bottom ~'/' @left + 1px 51% no-repeat;

filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));

}

.parent {

.mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);

//.mixins-ticket-vertical-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);

}

.child {

line-height: 200px;

}

升级版样式一(Scss 版本)

@mixin mixins-ticket-vertical($width, $height, $r, $left, $l-color, $r-color) {

width: $width;

height: $height;

// $left - 1px 是为了避免某些百分百比缩放页面时，出现空隙

// $r + 1px 是为了防止出现锯齿

// 51% 是为了防止出现元素中间会有一小段空白区域的情况

background: radial-gradient(circle at left top, transparent $r, $l-color $r + 1px) $left - 1px top / 100% 51% no-repeat,

radial-gradient(circle at left bottom, transparent $r, $l-color $r + 1px) $left - 1px bottom / 100% 51% no-repeat,

radial-gradient(circle at right top, transparent $r, $r-color $r + 1px ) -($width - $left) top / 100% 51% no-repeat,

radial-gradient(circle at right bottom , transparent $r, $r-color $r + 1px ) -($width - $left) bottom / 100% 51% no-repeat;

filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));

}

.parent {

@include mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28, #fc3a28);

}

.child {

line-height: 200px;

}

升级版样式二(Less 版本)

666805d69bdd3ac86189ba91e96b5390.png

.mixins-ticket-horizontal(@width, @height, @r, @top, @l-color, @r-color) {

width: @width;

height: @height;

background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) left @top - 1px ~'/' 51% 100% no-repeat,

radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left -(@height - @top) ~'/' 51% 100% no-repeat,

radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right @top - 1px ~'/' 51% 100% no-repeat,

radial-gradient(circle at right bottom, transparent @r, @r-color @r + 1px) right -(@height - @top) ~'/' 51% 100% no-repeat;

filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));

}

.mixins-ticket-horizontal-two(@width, @height, @r, @top, @l-color, @r-color) {

width: @width;

height: @height;

background: radial-gradient(circle at left top, transparent @r, @r-color @r + 1px) left bottom ~'/' 51% (@height - @top) no-repeat,

radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left top ~'/' 51% @top + 1px no-repeat,

radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right bottom ~'/' 51% (@height - @top) no-repeat,

radial-gradient(circle at right bottom, transparent @r, @l-color @r + 1px) right top ~'/' 51% @top + 1px no-repeat;

filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));

}

.parent {

.mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);

//.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);

}

.child {

line-height: 200px;

}

升级版样式三(Less 版本)

1796e1d0b39ff69c93e8a9e811399fd0.png

.mixins-ticket-horizontal-line(@width, @height, @r, @top, @l-color, @r-color,@border-offset,@border-color) {

width: @width;

height: @height;

background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) left @top - 1px ~'/' 51% 100% no-repeat,

radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left -(@height - @top) ~'/' 51% 100% no-repeat,

radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right @top - 1px ~'/' 51% 100% no-repeat,

radial-gradient(circle at right bottom, transparent @r, @r-color @r + 1px) right -(@height - @top) ~'/' 51% 100% no-repeat;

filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));

&::after {

position: absolute;

left: 0;

right: 0;

top: @top;

margin: auto;

content: '';

width: calc(~"100%" - 2*@r - @border-offset);

border-top: 1px dashed @border-color;

}

}

.parent {

.mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);

//.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);

}

.child {

line-height: 200px;

}

升级版样式四(Less 版本)

.mixins-ticket-vertical-three(@width, @height, @r, @left, @l-color, @r-color,@sm-r,@sm-offset,@sm-color) {

width: @width;

height: @height;

// @left - 1px 是为了避免某些百分百比缩放页面时，出现空隙

// @r + 1px 是为了防止出现锯齿

// 51% 是为了防止出现元素中间会有一小段空白区域的情况

background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) @left - 1px top ~'/' 100% 51% no-repeat,

radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) @left - 1px bottom ~'/' 100% 51% no-repeat,

radial-gradient(circle at right top, transparent @r, @r-color @r + 1px ) -(@width - @left) top ~'/' 100% 51% no-repeat,

radial-gradient(circle at right bottom , transparent @r, @r-color @r + 1px ) -(@width - @left) bottom ~'/' 100% 51% no-repeat;

filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));

&::after {

content: '';

position: absolute;

top: 0;

right: -@sm-r;

width: @sm-r;

height: 100%;

background-image: radial-gradient(circle at @sm-r, transparent @sm-r, @r-color @sm-r + 1px);

//background-size: @sm-r;

background-size: @sm-r @sm-offset;

}

}

.parent {

.mixins-ticket-vertical-three(200px, 200px, 10px, 150px, #fc3a28, #fc3a28,5px,20px,#fc3a28);

}

.child {

line-height: 200px;

}

注意事项

// ticket.less

//background: radial-gradient(circle at top right, transparent @r, @lcolor 0) -(@width - @left) top ~'/' 100% 55% no-repeat;

// 将上面的这行代码拆解如下：

//background-image: radial-gradient(circle at top right, transparent @r, @lcolor 0);

//background-position:-(@width - @left) top ;

//background-size:100% 55% ;

//background-repeat: no-repeat;

/*注意：这里先是有 50px 的透明区域，紧接着第二个区域设置了 0 ，可以理解为从这里开始重新设置样式区间*/

/*background: radial-gradient(circle at top right, transparent 50px, red 0, #66a8ff 50%);*/

/*在Chrome下，如果两个区域之间颜色直接以 0 偏差过渡，会有比较严重的锯齿*/

/*background: radial-gradient(10px at left,transparent 50%,#F6327C 50%);*/

/*background: radial-gradient(10px at left,transparent 50%,#F6327C 55%);*/

/*加阴影效果*/

/*filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));*/

/*多个径向渐变累加*/

/*background:

radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red 49px, transparent 50px),

radial-gradient(30px circle, red, red 29px, transparent 30px);*/

总结

到此这篇关于CSS 中使用径向渐变实现卡券效果的文章就介绍到这了,更多相关css 径向渐变实现卡券效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

jir bai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML渐变效果：线性渐变与径向渐变详解
a451319296的博客
07-22 1822
这篇教程详细介绍了在HTML中创建渐变效果的方法。通过使用CSS的线性渐变和径向渐变属性，可以为元素添加漂亮的背景样式。线性渐变可以通过角度或方向关键词定义颜色的过渡方式，并支持多个颜色的渐变。径向渐变则通过从一个圆心向外辐射应用颜色的渐变效果。此外，还提到了其他渐变属性的使用，如调整渐变尺寸、起始位置、重复方式和混合模式等。掌握这些知识后，你可以为网页设计添加各种酷炫的渐变效果，让页面更加吸引人。希望本教程能够帮助你理解HTML中的渐变，并激发你在实践中创造出独特的视觉效果。
CSS 中使用径向渐变实现卡券效果
11-20
本文将详细介绍如何使用径向渐变来实现这样的效果，特别关注如何通过Less预处理器编写可复用的样式混合。我们将探讨两种不同的方法，包括基础版本和一个升级版。 首先，让我们看看基础版本的卡券样式。这个版本使用...
HTML5背景渐变效果
m0_57264457的博客
01-14 1497
farthest-corner--- 以最远边为半径的椭圆形。closest-corner--- 以最近边为半径的椭圆形。farthest-side--- 以最远边为半径的圆形。closest-side--- 以最近边为半径的圆形。to bottom left--- 从右上到左下。to top right--- 从左下到右上。to bottom--- 从上到下。to right--- 从左到右。to left--- 从右到左。to top--- 从下到上。ellipse--- 椭圆形。
HTML——空间转换、动画、平面转换，渐变
weixin_52874695的博客
11-22 771
animation:动画名称 动画时间 动画速度 动画延迟 动画次数 动画方向 动画填充模式 动画播放状态;默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果。通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放。先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果。transform: scale(X轴缩放倍数, Y轴缩放倍数);2. 圆心位置取值：像素单位数值 /作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果。
13.HTML背景、背景渐变、盒子阴影
Yang_Ke_Di的博客
07-19 568
背景属性 属性 说明 示例 background-color 设置元素的背景颜色 background-color:#FFAAAA; background-image 设置元素的背景图片 background-image:url(图片路径); background-repeat 设置元素的背景图片重复方式 background-repeat:repeat; repeat(默认值，纵向横向平铺) no-repeat(背景图像
HTML渐变色
qq_59080175的博客
06-28 9159
在元素background属性里加入“background-image: radial-gradient（起始位置，形状，大小，颜色，颜色，颜色）”
三步用CSS写一个商城卡券
12-14
今天是618 ，各大商城都在搞促销活动，今天我们就来用css做一个商城卡卷，具体如下：   还在为上面这样格式各样的商城卡券的样式而发愁？CSS 不熟，canvas 太难，怎么办？ 用 CSS 写一个商城卡券需要几步？ 一共...
【前端素材】模板-多种实用卡券相关.zip
最新发布
04-04
SVG 动画：使用 SVG（可缩放矢量图形）和 SMIL（同步多媒体集成语言）技术创建矢量图形动画，可以实现复杂的矢量图形动画效果，如路径动画、填充动画等。 Canvas 动画：通过 HTML5 Canvas 元素绘制图形，利用 ...
Android自定义控件实现边缘凹凸的卡劵效果
09-02
在Android开发中，自定义控件能够满足特定的界面需求，提供更加丰富的视觉效果和交互体验。本篇文章将深入探讨如何实现一个具有边缘凹凸效果的卡劵样式自定义控件。首先，我们需要理解这个效果的核心在于创建一种...
scratch:卡券撕毁效果
05-09
在Scratch编程环境中，我们可以利用其图形化编程的特点来创建各种有趣的动画和互动效果，其中包括“卡券撕毁效果”。这个效果通常用于模拟现实生活中纸张或者卡片被撕裂的情景，为游戏或互动项目增添真实感。在...
html盒子渐变色,CSS3 颜色渐变
weixin_36323859的博客
06-16 1318
/p>Document* {margin: 0;padding: 0;}.container {width: 1000px;margin: 0 auto;}header {text-align: center;line-height: 60px;}section {width: 200px;height: 200px;border: 2px solid #ddd;float: left;ma...
微信html5线上卡券,16.7.1HTML5网页领取卡券
weixin_39617685的博客
06-04 394
HTML5中领取卡券是微信JS SDK接口的一个功能。在生成卡券ID之后，将其传入到HTML5页面中，再使用JS SDK接口来进行领取。首先定义微信jssdk的类文件
CSS不规则矩形形状径向/线性渐变填充 clip-path
weixin_46479342的博客
02-09 676
http://tools.jb51.net/static/api/css3path/index.html
html盒子边框怎么颜色渐变,css边框颜色渐变
weixin_29913191的博客
06-21 1564
在实际开发中，我们经常遇见边框需要背景渐变的实现要求，那么如何去实现呢，今天给大家分享依稀几种情况1.直角的背景渐变border渐变button{background:transparent;color:#23b7cb;font-size:15px;padding:5px 15px;border:1px transparent solid;border-image:linear-gradient(...
手机端我的优惠券页面html代码
ICode联盟
11-03 665
通用的商城app我的优惠券手机页面html模板。未使用、已使用、已过期，输入兑换码等功能。
生成卡券模版html源码,纯css制作卡券面板
weixin_36335279的博客
06-10 338
当看到设计图的时候，我是懵逼的。感觉有点小复杂啊。于是叫我们美工给我切了四张图。。然而做的时候也不知道哪根筋抽了，还是直接用css写出来了。没有用图片(PS：再一次感受到那些用css画出各种动物的大神的牛逼);因为是做的移动端的页面，所以最大宽度设为了640px；1.[代码][CSS]代码大众点评¥5全品优惠红包使用期限：2016.6.4-2016.6.5未使用大众点评¥5全品优惠红包使用期限：2...
HTML如何做出渐出效果,简单的CSS3制作的文本渐入渐出动效
weixin_35385921的博客
06-04 2123
CSS语言：CSSSCSS确定body {background: #310404;font-family: 'Roboto Condensed', sans-serif;}.container {position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 0;background: -webkit-radial-grad...
CSS径向渐变
CSS 初学者指南
06-27 632
当我们谈论渐变时，值得一开始的事实是渐变是CSS中的图像替换。 这是一种怪异的说法，即在CSS中创建渐变可为浏览器提供在屏幕上绘制图像的说明，而不是向浏览器提供您在图像编辑应用程序（例如Photoshop或Sketch）中创建的文件的源URL。 这是在代码中执行相同操作的本机CSS方式，因此，渐变包含在CSS图像值和替换内容规范中 。 径向渐变与线性渐变的不同之处在于，它从一个点开始并向外...
CSS设置盒子线性渐变色
sillage_honey的博客
08-28 3581
对盒子进行渐变色设置 background: linear-gradient(to right,#fe6785,#fca6aa); to right 是从左到右进行渐变色 to bottom 是从上到下进行渐变色设置
使用径向渐变创建CSS卡券效果
"使用CSS径向渐变创建卡券效果的示例" 在Web设计中，创建吸引人的用户体验是至关重要的，而卡券设计是许多电商、积分商城等应用中的常见元素。本文将介绍如何利用CSS的径向渐变来实现具有专业外观的卡券效果。以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值