前几日，朋友收到一个積分商城系统新项目，在其中有一个卡券换取礼物作用。我觉得了一会没有什么好的构思，就忙自身的新项目来到。但想起之后自身将会也会碰到相近的要求，因此礼拜天学习培训梳理了下几类卡券实际效果的完成。
普遍的卡券款式以下：
应用伪原素完成（Less 版本号）
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 (
<div className="App" style={
{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: 600
}
}>
<div className={'parent'}>
<div className="child">666</div>
</div>
</div>
);
}
export default App;
升級版款式一（Less 版本号）
.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 版本号）
.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 版本号）
.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下，假如2个地区中间色调立即以 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 轴向渐变色完成卡券实际效果內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！