本文將介紹如何使用 css 中的 radial-gradient 實現如下圖所示的優惠券樣式效果：
繪製基本樣式
首先，我們繪製出優惠券的基本樣式，這很簡單，就不多說了。
滿 100 減 30
/* scss */
.voucher {
width: 600px;
height: 200px;
display: flex;
.left {
width: 30%;
height: 100%;
background-color: #f76260;
.right {
height: 100%;
border: 1px solid #ddd;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
鋸齒實現剖析
鋸齒部分其實可以看成是十個如下所示的影象片段拼接起來的。每個片段的寬為鋸齒的半徑 6px，高為 20px。所以我們只需要畫出該片段，剩下的重複填充就好了。
我們把鋸齒的樣式加在 voucher 的偽元素上面就大功告成了：
10&::before {
content: '';
position: absolute;
height: 100%;
width: 6px;
left: 0;
top: 0;
background-image: radial-gradient(circle at 0px 10px, white 6px, #f76260 6px);
background-size: 6px 20px;
這裡的核心**是 background-image: radial-gradient(circle at 0px 10px, white 6px, #f76260 6px);。它其實是下面這種寫法的簡寫方式：background-image: radial-gradient(circle at 0px 10px, white 0, white 6px, #f76260 6px, #676260 100%);，表示從 (0px, 10px) 的位置開始進行徑向漸變，漸變的形狀為圓形，從 0 到 6px 由 white 漸變成 white，也就是純色; 6px 到圖形邊緣由 #f76260 漸變成 #f76260，也是純色。
為了重用我們的鋸齒樣式**，我們可以定義乙個 scss 的 mixin：
20/**
* 為了實現比較好的效果，最好確保：
* 1. $height 可以被 $num 整除
* 2. 2 * $radius < $height / $num
@mixin leftsawtooth($height, $num, $radius, $color, $bgcolor) {
$segmentheight: $height / $num;
height: $height;
&::before {
content: '';
position: absolute;
height: 100%;
width: $radius;
left: 0;
top: 0;
background-image:
radial-gradient(circle at 0px $segmentheight / 2, $bgcolor $radius, $color $radius);
background-size: $radius $segmentheight;
這樣，用起來就很方便了：
1@include leftsawtooth(600px, 10, 6px, #f76260, white);
公升級版公升級版的鋸齒顏色和左邊部分的背景顏色不一致，實現上會有些差異，不過思路還是一致的。
首先還是繪製出基本的樣式：
22.voucher {
width: 600px;
height: 200px;
margin: 20px auto;
display: flex;
position: relative;
border: 1px solid #ddd;
.left {
width: 30%;
height: 100%;
border-right: 1px dashed #ddd;
.right {
height: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
然後，繪製鋸齒部分。注意，這裡圓的半徑是空白部分5px加上1px的邊框，所以背景片段繪製需要額外加一段漸變：
6background-image: radial-gradient(circle at 0px 10px,
white 5px, /* 圓內的顏色是背景色 */
#ddd 5px,
#ddd 6px,
transparent 6px /* 圓外的顏色是透明色 */
注意到我們把圓內的顏色設定為背景色，圓外的顏色設定為透明色，為什麼要這樣後面會有說明。現在的效果離目標已經越來越近了，不過還是有點出入：
解決辦法是把偽元素往左移動乙個邊框大小的位置。這樣半圓左邊的線會被圓內的顏色覆蓋，而其他地方因為是透明色，所以線會保留(這就是為什麼要把圓內的顏色設定為背景色，圓外的顏色設定為透明色的原因了)。
完整的 mixin 如下所示：
21@mixin leftsawtoothborder($height, $num, $radius, $bgcolor, $bordercolor, $borderwidth) {
$segmentheight: $height / $num;
$extendedradius: $radius + $borderwidth;
height: $height;
border: $borderwidth solid $bordercolor;
&::before {
content: '';
position: absolute;
height: 100%;
width: $extendedradius;
left: -$borderwidth;
top: 0;
background-image: radial-gradient(circle at 0px $segmentheight / 2,
$bgcolor $radius,
$bordercolor $radius,
$bordercolor $extendedradius,
transparent $extendedradius
background-size: $extendedradius $segmentheight;
css繪製卡券優惠券 如何使用css建立乙個優惠券
需求場景 新增優惠券類目,展示使用者的優惠券 常見的設計樣式如下圖,核心為半圓 分步拆解 網上有幾種方案 一種是boder clip的形式,裁剪出4個小半圓角,拼湊在一起 一種是radial gradient徑向漸變,相對上一種需要考慮其相容性 一種是使用背景,特點是載入稍慢,體驗比css差,相容性...
iOS 繪製優惠券
樣式要求如下 如下,self.leftw為左半塊的寬度self.semicircle為左邊分界線的半圓弧半徑c heigth為控價高度self.radius優惠券圓角半徑 lpath uibezierpath bezierpath 起點 lpath movetopoint cgpointmake s...
css繪製卡券優惠券 三步用CSS寫乙個商城卡券
今天是618 各大 都在搞 活動，今天我們就來用css做乙個 卡捲，具體如下 還在為上面這樣格式各樣的 卡券的樣式而發愁？css 不熟，canvas 太難，怎麼辦？用 css 寫乙個 卡券需要幾步？一共需要三步 交給測試後，我們來分析下 css 卡券。我們來準備一下基礎知識 radial gradi...