需求場景
新增優惠券類目,展示使用者的優惠券
常見的設計樣式如下圖,核心為半圓
分步拆解
網上有幾種方案:
一種是boder+clip的形式,裁剪出4個小半圓角,拼湊在一起
一種是radial-gradient徑向漸變,相對上一種需要考慮其相容性
一種是使用背景,特點是載入稍慢,體驗比css差,相容性好
具體的**這裡就不一一演示了
注意細節
有一點要說明的是:
一定要注意細節,就像考慮到相容性和頻寬以及載入時長一樣,我們也要為以後可能的變動留有空間.
前兩種方案的特點是左右的容器都有背景色,且半圓的邊框色是有背景色擷取而獲得的.
當我們需要指定半圓的邊框和其他邊框顏色同時變換不同背景色的時候呢?
參考下圖:
邊框色和背景色可以是不一致的,並且整個邊框顏色可以保持一致,而這些,上述兩種方法不論是border還是gradient顯然不行.
其他方法
優惠券的樣式是兩部分拼接在一起,同時帶有半圓樣式
那麼我們的思路可以是:
建立乙個盒子,包含左右兩個卡券部分,卡券背景色各自定義
盒子上蓋上兩個半圓,乙個在頂部,乙個在底部,背景色為白色
卡券和半圓的邊框都可以自定義,同色使用乙個色號即可
直接使用css建立乙個嵌有半圓的邊框不太現實,但是我們可以通過其他方法達到視覺上的實現.
中間需要一些空間思維和想象能力,過程可能複雜些,但是能實現目的就行,另闢蹊徑的效果更好.
建立乙個總容器
容器控制卡券的寬高和布局上位置,不帶有其他樣式
建立左右卡券
新增兩個容器,乙個放左邊,乙個放右邊,割分總容器空間
左邊容器單獨設定左上和左下兩個圓角,右邊容器單獨設定右上和右下兩個圓角
左右容器各自設定自定義背景色
貼上半圓
新增兩個半圓,背景色為白色,邊框待定
相對總容器絕對定位,乙個放頂部,乙個放底部
偏移量自定義,保持一致即可
到這一步就完成了最初的樣式,接下來到了設定邊框的時間
設定邊框
給左右卡券容器和兩個半圓新增邊框即可,不影響背景色
製作半圓
核心是製作半圓(只有輪廓)
// 上半圓
.circle{
width: 200px;
height: 100px; /* 寬度的一半 */
border-radius:100px 100px 0 0; /* 上和右為高度的長度 */
background-color: #fff;
border: 1px solid gray;
border-bottom: none;
// 下半圓
.circle{
width: 200px;
height: 100px; /* 寬度的一半 */
border-radius: 0 0 100px 100px; /* 上和右為高度的長度 */
background-color: #fff;
border: 1px solid gray;
border-bottom: none;
css繪製卡券優惠券 CSS 實現優惠券樣式
本文將介紹如何使用 css 中的 radial gradient 實現如下圖所示的優惠券樣式效果 繪製基本樣式 首先，我們繪製出優惠券的基本樣式，這很簡單，就不多說了。滿 100 減 30 scss voucher width 600px height 200px display flex left...
iOS 繪製優惠券
樣式要求如下 如下,self.leftw為左半塊的寬度self.semicircle為左邊分界線的半圓弧半徑c heigth為控價高度self.radius優惠券圓角半徑 lpath uibezierpath bezierpath 起點 lpath movetopoint cgpointmake s...
京東優惠券如何測試
一 驗證優惠券功能正常 冒煙測試 後台新增正確優惠券，審批通過，前端使用者領取並成功抵扣付款。二 發布優惠券 1 基本資訊 1 優惠券名稱 必須項，限制15字 有效等價類 1 15 1，15 前端功能。驗證顯示正確，友好，好看 無效等價類 小於1 0 大於15 16 為空 報錯友好，和諧用語 特殊邊...