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

前言

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

常見的卡券樣式如下：

image.png

同事二話沒說，直接給我寫了一種，那真的是快如閃電就給我實(shí)現(xiàn)了一個(gè)。是用偽元素實(shí)現(xiàn)的

使用偽元素實(shí)現(xiàn)（Less 版本）

image.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 是為了避免某些百分百比縮放頁面時(shí)，出現(xiàn)空隙
    width: @r + 1px;
    height: 100%;
    //這里的 @r + 1px 是為了防止出現(xiàn)鋸齒
    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;

后面我回去之后，仔細(xì)去研究了一下，想把它做得更好看，然后就有了升級(jí)版樣式一

升級(jí)版樣式一（Less 版本）

image.png
.mixins-ticket-vertical(@width, @height, @r, @left, @l-color, @r-color) {
  width: @width;
  height: @height;
  // @left - 1px 是為了避免某些百分百比縮放頁面時(shí)，出現(xiàn)空隙
  // @r + 1px 是為了防止出現(xiàn)鋸齒
  // 51% 是為了防止出現(xiàn)元素中間會(huì)有一小段空白區(qū)域的情況
  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 是為了避免某些百分百比縮放頁面時(shí)，出現(xiàn)空隙
  // @r + 1px 是為了防止出現(xiàn)鋸齒
  // 51% 是為了防止出現(xiàn)元素中間會(huì)有一小段空白區(qū)域的情況
  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;
}

升級(jí)版樣式一（Scss 版本）

@mixin mixins-ticket-vertical($width, $height, $r, $left, $l-color, $r-color) {
  width: $width;
  height: $height;
  // $left - 1px 是為了避免某些百分百比縮放頁面時(shí)，出現(xiàn)空隙
  // $r + 1px 是為了防止出現(xiàn)鋸齒
  // 51% 是為了防止出現(xiàn)元素中間會(huì)有一小段空白區(qū)域的情況
  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;
}

后面也接連改了幾次，大家看一看效果怎么樣

升級(jí)版樣式二（Less 版本）

image.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;
}

升級(jí)版樣式三（Less 版本）

image.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;
}

升級(jí)版樣式四（Less 版本）

image.png
.mixins-ticket-vertical-three(@width, @height, @r, @left, @l-color, @r-color,@sm-r,@sm-offset,@sm-color) {
  width: @width;
  height: @height;
  // @left - 1px 是為了避免某些百分百比縮放頁面時(shí)，出現(xiàn)空隙
  // @r + 1px 是為了防止出現(xiàn)鋸齒
  // 51% 是為了防止出現(xiàn)元素中間會(huì)有一小段空白區(qū)域的情況
  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;
}

注意事項(xiàng)

// 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 的透明區(qū)域，緊接著第二個(gè)區(qū)域設(shè)置了 0 ，可以理解為從這里開始重新設(shè)置樣式區(qū)間*/
/*background: radial-gradient(circle at top right, transparent 50px, red 0, #66a8ff 50%);*/

/*在Chrome下，如果兩個(gè)區(qū)域之間顏色直接以 0 偏差過渡，會(huì)有比較嚴(yán)重的鋸齒*/
/*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));*/

/*多個(gè)徑向漸變累加*/
/*background: 
radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red 49px, transparent 50px),
radial-gradient(30px circle, red, red 29px, transparent 30px);*/

后面我對(duì)照這幾個(gè)，最后我選了最后一種樣式，我覺得這個(gè)比較酷，最后拿過去給他們看，他們也覺得這個(gè)方案非常好看，得到了別人的認(rèn)可，我也覺得很開心。

如果你覺得這篇文章不錯(cuò)，請(qǐng)別忘記點(diǎn)個(gè)贊跟關(guān)注哦，成為我的粉絲~，我會(huì)繼續(xù)努力創(chuàng)作好的文章的??

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容