CSS不規(guī)則卡片，純CSS制作優(yōu)惠券樣式，CSS實(shí)現(xiàn)鋸齒樣式

SS不規(guī)則卡片，純CSS制作優(yōu)惠券樣式，CSSS實(shí)現(xiàn)鋸齒樣式

之前也有寫(xiě)過(guò) CSS 優(yōu)惠券樣式《CSS3徑向漸變實(shí)現(xiàn)優(yōu)惠券波浪造型》，這次再來(lái)溫習(xí)一遍，并且將更為詳細(xì)的講解，從布局到具體樣式說(shuō)明，最后定義 CSS 變量，自定義主題顏色。

布局

布局其實(shí)是學(xué)習(xí)前端的重要部分，最常用的方式就是從上而下、從左而右、亦或者兩個(gè)相結(jié)合。

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

1、優(yōu)惠券金額和過(guò)期時(shí)間

2、優(yōu)惠券描述

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

這樣分析，我們就有了 html 架構(gòu)了

<div class="coupon">
  <!-- 1、優(yōu)惠券金額和過(guò)期時(shí)間 -->
  <div class="price">
    100元
    <span>優(yōu)惠券</span>
    <p class="timeout">2020-12-31 18:18:18過(guò)期</p>
  </div>

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

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

CSS不規(guī)則卡片，純CSS制作優(yōu)惠券樣式，CSSS實(shí)現(xiàn)鋸齒樣式

CSS修飾

接下來(lái)我們用 CSS 美化我們的 html 。同理，我們也根據(jù)布局分步進(jìn)行樣式書(shū)寫(xiě)。

1、優(yōu)惠券金額和過(guò)期時(shí)間樣式

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

.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不規(guī)則卡片，純CSS制作優(yōu)惠券樣式，CSSS實(shí)現(xiàn)鋸齒樣式

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

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

注釋：

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

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

circle ：指定圓形的徑向漸變

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

farthest-corner (默認(rèn)) : 指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角

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

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

farthest-side ：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊

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

center（默認(rèn)）：設(shè)置中間為徑向漸變圓心的縱坐標(biāo)值。

top：設(shè)置頂部為徑向漸變圓心的縱坐標(biāo)值。

bottom：設(shè)置底部為徑向漸變圓心的縱坐標(biāo)值。

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

這樣價(jià)格上方的凹槽就有了，接下來(lái)下方的鋸齒我們也可以用徑向漸變的方式實(shí)現(xiàn)：

.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 設(shè)置徑向漸變背景為一個(gè)圓，后進(jìn)行平鋪就形成了鋸齒，調(diào)整位置。

CSS不規(guī)則卡片，純CSS制作優(yōu)惠券樣式，CSSS實(shí)現(xiàn)鋸齒樣式

其實(shí)還有更簡(jiǎn)單的方法，可以直接用一個(gè)虛線邊框即可搞定，請(qǐng)看：

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

CSS不規(guī)則卡片，純CSS制作優(yōu)惠券樣式，CSSS實(shí)現(xiàn)鋸齒樣式

當(dāng)然也有缺陷，間隔位置不好控制

2、優(yōu)惠券描述與按鈕優(yōu)惠券核心鋸齒已經(jīng)搞定了，下面都是小菜啦，非常簡(jiǎn)單咯

.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不規(guī)則卡片，純CSS制作優(yōu)惠券樣式，CSSS實(shí)現(xiàn)鋸齒樣式

主題顏色

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

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

2、方便主題使用

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

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

接下來(lái)我們就為不同主題定義不同的顏色變量

.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主題下的優(yōu)惠券，就是紫色主題，theme2主題下的優(yōu)惠券，就是藍(lán)色主題...，而默認(rèn)主題顏色就是我們 .coupon 類選擇器里面的定義的變量顏色（紅色）。

小結(jié)

今天你學(xué)到了嗎？從布局分析到具體實(shí)現(xiàn)，再到主題顏色，相信小伙伴們都各有所得。

情提示：以下代碼是我們邀請(qǐng)的前端架構(gòu)師基于天貓門戶編寫(xiě)的css相關(guān)代碼，現(xiàn)在免費(fèi)分享給大家，獲取的方式為：

關(guān)注此頭條號(hào)“互聯(lián)網(wǎng)IT信息”——>私信發(fā)送 “天貓css” ，（注意：css全是小寫(xiě)）即可得到源代碼的獲取方式。

1. 此篇文章講解目錄：

案例和由此案例重點(diǎn)講解的知識(shí)點(diǎn)介紹
案例代碼實(shí)現(xiàn)
css可見(jiàn)性知識(shí)點(diǎn)詳解

2. 案例和相關(guān)知識(shí)點(diǎn)介紹

此案例是頁(yè)面，效果如下：

此頁(yè)面的技術(shù)實(shí)現(xiàn)解析：

這種商品的卡片式展示效果，需要保證每個(gè)卡片的寬高一致，才能達(dá)到美觀效果，所以，需要對(duì)不確定的文字進(jìn)行可見(jiàn)性設(shè)置，確保無(wú)論多少，展示效果一致

此案例中主要用到了，基于此，我們會(huì)系統(tǒng)的將如下知識(shí)點(diǎn)全部講解：

css可見(jiàn)性：display、overflow、visibility

3. 此案例的代碼實(shí)現(xiàn)

第一步：編寫(xiě)此廣告的卡片的html，分為圖片、標(biāo)題、價(jià)格三個(gè)部分

第二步：分別定義圖片、標(biāo)題、價(jià)格的樣式，同時(shí)注意標(biāo)題使用overflow，對(duì)超出的文字部分進(jìn)行隱藏

4. 此案例的知識(shí)點(diǎn)詳解

可見(jiàn)性

三種可見(jiàn)性：

1：display:none 元素隱藏不占位置

2：overflow:hidden; 將超出部分的元素隱藏

3：visibility:hidden; 元素隱藏占位置

CSS實(shí)現(xiàn)弧形卡片的3種方式：打造優(yōu)雅的現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)

**導(dǎo)語(yǔ)：** 在網(wǎng)頁(yè)設(shè)計(jì)中，弧形元素以其柔和而富有動(dòng)態(tài)感的設(shè)計(jì)深受青睞，尤其在卡片設(shè)計(jì)上，弧形邊緣能賦予其獨(dú)特的視覺(jué)效果。本文將詳細(xì)介紹利用CSS創(chuàng)建弧形卡片的3種不同方法，包括但不限于CSS border-radius、clip-path及mask屬性，讓您的網(wǎng)頁(yè)更具吸引力。下面我們將通過(guò)實(shí)戰(zhàn)代碼演示每種方法的具體應(yīng)用。

---

### **一、基礎(chǔ)方法：border-radius 弧度控制**

**簡(jiǎn)介：**

`border-radius` 是最常見(jiàn)且兼容性最好的創(chuàng)建圓角或弧形卡片的方式，適用于創(chuàng)建簡(jiǎn)單弧形邊角的卡片設(shè)計(jì)。

```html

</div>

```

```css

.card-rounded {

background-color: #f5f5f5;

width: 200px;

height: 100px;

border-radius: 20px; /* 可根據(jù)需要調(diào)整數(shù)值 */

overflow: hidden;

}

```

上述代碼將創(chuàng)建一個(gè)具有弧形邊角的卡片。通過(guò)調(diào)整 `border-radius` 的值，您可以創(chuàng)建出不同程度的弧形效果，但請(qǐng)注意，這種方法無(wú)法創(chuàng)建非對(duì)稱或復(fù)雜弧形。

---

### **二、進(jìn)階技巧：clip-path 實(shí)現(xiàn)自由形狀**

**介紹：**

`clip-path` 屬性允許我們創(chuàng)建任意形狀的裁剪區(qū)域，從而實(shí)現(xiàn)更為復(fù)雜和定制化的弧形卡片設(shè)計(jì)。

```html

</div>

```

```css

.card-clip-path {

background-color: #f5f5f5;

width: 200px;

height: 100px;

-webkit-clip-path: circle(50% at right 50%);

clip-path: circle(50% at right 50%);

}

```

上述代碼創(chuàng)建了一個(gè)右半部分呈弧形的卡片。`clip-path` 提供了更多創(chuàng)造性可能，可以創(chuàng)建橢圓、多邊形甚至路徑裁剪等多種弧形效果。然而需要注意的是，`clip-path` 的瀏覽器兼容性不如 `border-radius` 理想。

---

### **三、創(chuàng)新方案：CSS Masks 打造靈活曲線**

**原理：**

CSS Masks 可以通過(guò) `mask-image` 或 `mask-shape` 屬性為元素添加遮罩，同樣可以用來(lái)創(chuàng)建弧形卡片效果。

```html

</div>

```

```css

.card-mask {

background-color: #f5f5f5;

width: 200px;

height: 100px;

-webkit-mask-image: radial-gradient(circle, transparent 50%, white 51%);

mask-image: radial-gradient(circle, transparent 50%, white 51%);

}

```

以上代碼利用徑向漸變作為遮罩，實(shí)現(xiàn)了卡片頂部弧形邊緣的效果。CSS Masks 具有高度靈活性，可以用于創(chuàng)建更復(fù)雜的形狀，但它的瀏覽器兼容性也相對(duì)有限。

---

### **結(jié)論與比較**

- **border-radius** 方法最為簡(jiǎn)單易用且兼容性最好，適合日常項(xiàng)目和快速原型設(shè)計(jì)；

- **clip-path** 提供了更豐富的形狀裁剪能力，適合需要突破常規(guī)、追求獨(dú)特視覺(jué)效果的場(chǎng)景；

- **CSS Masks** 能夠創(chuàng)建基于圖像或者漸變的復(fù)雜蒙版效果，適用范圍較廣，但需要注意舊版本瀏覽器的支持情況。

選擇何種方式實(shí)現(xiàn)弧形卡片取決于項(xiàng)目的實(shí)際需求和兼容性要求。通過(guò)巧妙運(yùn)用這些CSS特性，您可以輕松打造出別具一格的弧形卡片設(shè)計(jì)，增添網(wǎng)站的視覺(jué)吸引力。

---

**補(bǔ)充實(shí)踐案例：**

對(duì)于一些高級(jí)應(yīng)用場(chǎng)景，您還可以結(jié)合以上技術(shù)，比如使用CSS Grid布局和Flexbox進(jìn)行容器布局，同時(shí)利用CSS變量和媒體查詢適應(yīng)不同屏幕尺寸，讓弧形卡片設(shè)計(jì)更加靈活和響應(yīng)式。

切記，在實(shí)際開(kāi)發(fā)過(guò)程中，務(wù)必關(guān)注瀏覽器兼容性問(wèn)題，必要時(shí)借助PostCSS、Autoprefixer等工具增強(qiáng)跨瀏覽器兼容性。同時(shí)，保持對(duì)新興CSS特性的關(guān)注，與時(shí)俱進(jìn)地更新您的設(shè)計(jì)與開(kāi)發(fā)技術(shù)棧。

在線咨詢

上一篇：HTML的文字樣式
下一篇：PHPStorm屬性的HTML縮進(jìn)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

CSS不規(guī)則卡片，純CSS制作優(yōu)惠券樣式，CSS實(shí)現(xiàn)鋸齒樣式

布局

CSS修飾

1、優(yōu)惠券金額和過(guò)期時(shí)間樣式

主題顏色

小結(jié)

情提示：以下代碼是我們邀請(qǐng)的前端架構(gòu)師基于天貓門戶編寫(xiě)的css相關(guān)代碼，現(xiàn)在免費(fèi)分享給大家，獲取的方式為：

1. 此篇文章講解目錄：

2. 案例和相關(guān)知識(shí)點(diǎn)介紹

3. 此案例的代碼實(shí)現(xiàn)

4. 此案例的知識(shí)點(diǎn)詳解

您的項(xiàng)目需求