CSS不規則卡片，純CSS制作優惠券樣式，CSS實現鋸齒樣式

SS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

之前也有寫過 CSS 優惠券樣式《CSS3徑向漸變實現優惠券波浪造型》，這次再來溫習一遍，并且將更為詳細的講解，從布局到具體樣式說明，最后定義 CSS 變量，自定義主題顏色。

布局

布局其實是學習前端的重要部分，最常用的方式就是從上而下、從左而右、亦或者兩個相結合。

看上圖，而這里，我們就只是最簡單的布局方式，從上而下：

1、優惠券金額和過期時間

2、優惠券描述

3、按鈕（其實按鈕也可以放到“2”里面去）

這樣分析，我們就有了 html 架構了

<div class="coupon">
  <!-- 1、優惠券金額和過期時間 -->
  <div class="price">
    100元
    <span>優惠券</span>
    <p class="timeout">2020-12-31 18:18:18過期</p>
  </div>

  <!-- 2、優惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、過期作廢</p>
  </div>

  <!-- 3、按鈕 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

CSS修飾

接下來我們用 CSS 美化我們的 html 。同理，我們也根據布局分步進行樣式書寫。

1、優惠券金額和過期時間樣式

這里的核心就是上方的凹槽和下方的鋸齒

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css變量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

這里用到了徑向漸變，不清楚用法的小伙伴可以看看語法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

注釋：

（1）、shape 確定圓的類型:

ellipse (默認): 指定橢圓形的徑向漸變。

circle ：指定圓形的徑向漸變

（2）、size 定義漸變的大小，可能值：

farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊

closest-corner ：指定徑向漸變的半徑長度為從圓心到離圓心最近的角

farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

（3）、position 定義漸變的位置。可能值：

center（默認）：設置中間為徑向漸變圓心的縱坐標值。

top：設置頂部為徑向漸變圓心的縱坐標值。

bottom：設置底部為徑向漸變圓心的縱坐標值。

（4）、start-color, ..., last-color 用于指定漸變的起止顏色。

這樣價格上方的凹槽就有了，接下來下方的鋸齒我們也可以用徑向漸變的方式實現：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

偽類元素 ::after 設置徑向漸變背景為一個圓，后進行平鋪就形成了鋸齒，調整位置。

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

其實還有更簡單的方法，可以直接用一個虛線邊框即可搞定，請看：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

當然也有缺陷，間隔位置不好控制

2、優惠券描述與按鈕優惠券核心鋸齒已經搞定了，下面都是小菜啦，非常簡單咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按鈕樣式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

主題顏色

大家都看到了，我們上方代碼主要顏色都采用的變量，而且變量是定義在 .coupon 類選擇器里面的。這樣的原因是：

1、CSS變量作用域（CSS變量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）

2、方便主題使用

ok，我們就可以copy 多個優惠券，并給每個添加一個不同的 class，比如下方的 theme1、theme2、theme3

<div class="coupon theme1">
  ...
</div>
<div class="coupon theme2">
  ...
</div>
<div class="coupon theme3">
  ...
</div>
<div class="coupon">
  ...
</div>

接下來我們就為不同主題定義不同的顏色變量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

這樣，theme1主題下的優惠券，就是紫色主題，theme2主題下的優惠券，就是藍色主題...，而默認主題顏色就是我們 .coupon 類選擇器里面的定義的變量顏色（紅色）。

小結

今天你學到了嗎？從布局分析到具體實現，再到主題顏色，相信小伙伴們都各有所得。

天逛論壇，發現有人問了這樣一個問題：

有位大佬直接po上了代碼，隨手學一下。

實現效果如下：

代碼如下：

<div class="container">
   <div class="wrap">
      <div class="box t"></div>
      <div class="box r"></div>
      <div class="box b"></div>
      <div class="box l"></div>
   </div>
</di>

光html, body {
   height: 100%;
}

.container {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.wrap {
   width: 200px;
   height: 200px;
   transform-style: preserve-3d;
}

.box {
   position: absolute;
   width: 200px;
   height: 200px;
   background: grey;
}

.t {
   background: red;
   transform: translate(0, -125px) rotateY(1deg);
}

.r {
   background: blue;
   transform: translate(125px, 0) rotateX(-1deg);
}

.b {
   background: green;
   transform: translate(0, 125px) rotateY(-1deg);
}

.l {
   background: yellow;
   transform: translate(-125px, 0) rotateX(1deg);
}

感謝@MuTool 大佬

平時開發中，有時候會碰到下面這種“弧形”樣式，主要分為“內凹”和“外凸”兩種類型，如下

該如何實現呢？或者想一下，有哪些 CSS 屬性和“弧形”有關？下面介紹 3 種方式，一起看看吧

一、border-radius

通常情況下，我們用border-radius都是這樣

div{
  border-radius: 20px;
}

這樣表示 4 個角都是圓角，并且是標準的正圓

其實，border-radius還支持斜杠的寫法，比如

div{
  border-radius: 20px / 10px;
}

這表示，圓角是一個x半徑為20px，y半徑為10px的橢圓，如下

放大來看，其實是這樣的

進一步，我們將x半徑設置成50%，這樣就能得到一個完整的弧形了

div{
  border-radius: 50% / 20px;
}

效果如下

這樣就得到了“外凸”的弧形了，是不是很容易？

至于“內凹”弧形，單純的border-radius表示無能為力，可以看接下來的方式

二、偽元素+border-radius

這個其實大多數同學都能想到的方式，一個矩形和一個橢圓組合起來，不就是一個弧形卡片了嗎？原理非常簡單

用代碼實現就是

div{
  position: relative;
}
div::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 20px;
  border-radius: 100%;
  background: inherit; /* 繼承父級背景 */
  bottom: 0;
  left: 50%;
  transform: translate(-50%,50%);
}

效果如下（虛線表示偽元素的邊緣）

用偽元素的好處是，可以隨意控制弧度的大小和位置，這個是border-radius所不能比的

通過overflow:hidden裁剪多余部分，可以得到一個邊緣比較“鋒利”的弧形，如下所示

另外，用偽元素還能實現“內凹”的效果，不過這需要反過來思考，什么意思呢？之前是給偽元素加的背景，現在需要加在偽元素的外圍，這里用box-shadow實現，原理如下

用代碼實現就是

div{
  background: none;
  overflow: hidden;
}
div::after{
  content: '';
  background: none;
  box-shadow: 0 0 0 9999vh #FFE8A3; /*足夠大的陰影*/
  z-index: -1;
}

效果如下（虛線表示偽元素的邊緣）

三、徑向漸變

提到圓弧，還可以想到徑向漸變，沒錯，這里通過徑向漸變也能輕易實現弧形卡片效果。

先來看“外凸”的，其實思路和偽元素一樣，先拆分，一個橢圓和一個矩形，對應的就是徑向漸變（radial-gradient）和線性漸變(linear-gradient)，如下

用代碼實現就是

div{
  background: 
    radial-gradient(closest-side, #9747FF 100%,transparent 0) center bottom/100% 20px no-repeat,
    linear-gradient(#FFE8A3, #FFE8A3) 0 0/100% calc(100% - 10px) no-repeat;
}

效果如下（紫色部分是徑向漸變）

再來看“內凹”的弧形，其實也和偽元素思路類似，只不過這里需要繪制一個足夠大的漸變，從透明到純色的徑向漸變，示意如下

調整好漸變中心點，用代碼實現就是

div{
  background: radial-gradient(50% 10px at center bottom, transparent 100%,#FFE8A3 0) center bottom;
}

效果如下（全部都是徑向漸變繪制）

當然你也可以隨意改變徑向的弧度和大小，來實現各種不同的效果。

以上所有demo都可以查看以下在線鏈接

CSS radius layout (codepen.io)

四、優缺點總結

以上就是本文的全部內容了，共介紹了 3 種不同的方式，下面總結一下各自優缺點

border-radius 支持斜杠語法，可以單獨控制圓弧的x、y半徑，實現“外凸”圓弧最簡單，缺點是圓弧不能自定義弧度，也不能實現“內凹”效果
偽元素最符合常規思維，可以解決以上問題，缺點是需要占用偽元素，略微麻煩
漸變實現和偽元素拼接思路類似，缺點是語法復雜，需要熟練掌握漸變語法

作者：XboxYan
鏈接：https://juejin.cn/post/7308434314777788426

在線咨詢

上一篇：社交媒體環境中人們對媒介的依賴
下一篇：前端所必須知道的HTTP知識是些什么呢？原來是這些啊

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS不規則卡片，純CSS制作優惠券樣式，CSS實現鋸齒樣式

布局

CSS修飾

1、優惠券金額和過期時間樣式

主題顏色

小結

一、border-radius

二、偽元素+border-radius

三、徑向漸變

四、優缺點總結

您的項目需求