同事幫我用css作出炫酷的卡券效果，深感崇拜啊

前言

前幾天，我接到了一個項目，模塊中要寫一個卡券效果，當時沒有圖片，也就是要用css來實現，當時我是懵逼的，也沒有寫過這樣的，一時間不知道怎麼寫，畢竟要寫的像UI設計的同樣美觀。我就只好求救個人大神級別的同事了。不只css玩的溜，人家JavaScript玩的更溜，閣下實在是佩服。

常見的卡券樣式以下：

 

同事二話沒說，直接給我寫了一種，那真的是快如閃電就給我實現了一個。是用僞元素實現的

使用僞元素實現（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下，若是兩個區域之間顏色直接以 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);*/

 

後面我對照這幾個，最後我選了最後一種樣式，我以爲這個比較酷，最後拿過去給他們看，他們也以爲這個方案很是好看，獲得了別人的承認，我也以爲很開心。

若是你以爲這篇文章不錯，請別忘記點個贊跟關注哦~，我會繼續努力創做好的文章的😊