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 類選擇器里面的定義的變量顏色（紅色）。

小結

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

篇文章主要講述了CSS樣式更改中的背景Background，這篇文章我們來談談字體設置Font&邊框Border的基礎用法。

1.字體設置Font

1).字體系列

<div style='font-family: sans-serif normal'></div>
可用字體：
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier

2).字體風格

<div style='font-style:normal'></div>
文本傾斜:
normal   文本正常顯示
italic   文本斜體顯示
oblique  文本傾斜顯示

3).字體變形

<div style='font-variant:small-caps'></div>
normal          顯示標準字體。
small-caps      顯示小型大寫字母的字體。

4).字體加粗

<div style='font-weight:normal'></div>
normal    標準的字符
bold      粗體字符
bolder    更粗的字符
lighter   更細的字符
也可以使用數字表示，范圍為100~900

5).字體大小

<div style='font-size:60px'></div>
smaller 變小
larger  變大
length  固定值
而且還支持百分比

2.邊框Border

首先說一下邊框風格，它的風格比較多，常用的一般是實線為主：

<div style='border-style:none'></div>
hidden     隱藏邊框
dotted     點狀邊框
dashed     虛線邊框
solid      實線邊框
double     雙線邊框
groove     3D凹槽邊框
ridge      3D壟狀邊框
inset      3D inset邊框
outset     3D outset邊框
邊框也有四面，所以也會有上下左右
所以有時候為了更精確定位并修改樣式可以使用：
border-top-style     上邊框樣式
border-right-style   右邊框樣式
border-bottom-style  下邊框樣式
border-left-style    左邊框樣式

先定義邊框的寬度風格和顏色，然后定義邊框的其它屬性。

1).邊框形狀

<div style='border-radius:25px;'></div>

2).邊框陰影

<div style='box-shadow:1px 2px 2px 2px red'></div>
參數含義：
邊框各個方向的大小和顏色

3).邊框圖片

<div style='border-image:url(1.png) 30 30 10 round'></div>
參數含義：
邊框圖片的路徑
圖片邊框向內偏移
圖片邊框的寬度
邊框圖像區域超出邊框的量
圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。

總結

這篇文章主要介紹了CSS樣式更改篇中的字體設置Font&邊框Border設置，希望讓大家對CSS選擇器有個簡單的認識和了解。
****看完本文有收獲？請轉發分享給更多的人****

IT共享之家

想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/

過本文章，可以掌握以下內容：

pyside6 border樣式使用
pyside6 哪些控件支持border屬性
pyside6 border陰影效果

一、pyside6 border樣式使用

border可以為組件設置邊框寬度，形狀，顏色和圓角樣式，好的邊框樣式設計及統一，有助于界面統一風格，是界面更加清晰有條理。下面是樣式的一些基本使用介紹

基本樣式

邊框寬度樣式 (border-width)：

設置邊框的寬度，可以使用像素(px)或其他CSS單位，等效于分別指定border-top-width、border-right-width、border-bottom-width和border-left-width屬性。未指定此屬性，則默認為 none。

border-width: 2px;

邊框形狀樣式 (border-style)：

設置邊框的樣式，等效于分別指定border-top-style、border-right-style、border-bottom-style和border-left-style屬性。未指定此屬性，則默認為 none。常見的邊框形狀樣式有

樣式值	說明
none	無邊框
solid	實線邊框
dashed	虛線邊框
dotted	點線邊框
double	雙線邊框
groove	凹槽邊框
ridge	脊邊框
inset	嵌入邊框
outset	突出處邊框

示例：

border-style: solid;

邊框顏色樣式 (border-color)：

設置邊框的顏色，可以使用顏色名稱、RGB值、HEX值等。等效于分別指定border-top-color、border-right-color、border-bottom-color和border-left-color屬性，如果未指定此屬性，則默認為color（即小部件的前景色）

border-color: black;

簡寫樣式

可以使用簡寫屬性同時設置邊框的寬度、形狀和顏色。等效于分別指定border-color、border-style和/或border-width屬性。

border: 2px solid black;

邊框四邊寬度樣式

除了上面幾種方式，也可以分別為每個邊設置不同的寬度、形狀和顏色

四個邊的寬度

border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;

四個邊的形狀

border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;

四個邊的顏色

border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;

圖像邊框樣式（border-image）

允許使用圖像作為邊框，而不是純色或簡單的樣式，參見：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image語法

border-image: <'border-image-source'> <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? <'border-image-repeat'>;

子屬性說明

border-image-source

定義邊框圖像的源，可以是 URL 或其他圖像源。例子：url(border.png) 或 none。

border-image-slice

定義邊框圖像的切片位置，用于將圖像分成九個部分（四個角、四條邊和中間部分）。

可以使用一個、兩個、三個或四個值，分別表示上、右、下、左的切片位置。例子：30、30 30、30 30 30、30 30 30 30。

border-image-width

定義邊框圖像的寬度，可以是一個、兩個、三個或四個值，表示上、右、下、左的寬度。

它是一個可選值，位于 border-image-slice 之后，用 / 分隔。例子：30、30 30、30 30 30、30 30 30 30。

border-image-outset

定義邊框圖像超出邊框盒的距離，可以是一個、兩個、三個或四個值，表示上、右、下、左的外延。它是一個可選值，位于 border-image-width 之后，用 / 分隔。例子：10、10 10、10 10 10、10 10 10 10。

border-image-repeat

定義邊框圖像的重復方式，有四個可能的值：stretch（拉伸）、repeat（重復）、round（圓整）、space（空間）。可以使用一個值或兩個值，表示水平和垂直方向的重復方式。例子：stretch、repeat、round、space。

示例：

這個是81*81像素的圖片，垂直方向和水平方向上各排列著三個菱形，每個菱形的寬和高皆為 81 ÷ 3 = 27像素

from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget
if __name__ == '__main__':
    app = QApplication([])
    # 創建主窗口
    window = QWidget()
    window.setWindowTitle('PySide6 Border Image Example')
    # 創建按鈕
    button = QPushButton('圖片按鈕')
    button.setStyleSheet("""
        QPushButton {
            width: 200px;
            background-color: #ffa;
            border: 36px solid orange;
            margin: 30px;
            padding: 10px;
            border-image: url(../icons/border.png) 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
        }
    """)
    # 布局管理
    layout = QVBoxLayout()
    layout.addWidget(button)
    window.setLayout(layout)
    window.show()
    app.exec()

圓角邊框樣式 (border-radius)

設置圓角邊框，不能直接設置為百分比單位，只有固定的像素（px）和其他絕對CSS單位。

border-radius: 10px;

分別設置每個角的圓角

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

以下是一個完整的示例，展示如何為一個QPushButton組件定義各種邊框屬性：

from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget
if __name__ == '__main__':
    app = QApplication([])
    # 創建主窗口
    window = QWidget()
    window.setWindowTitle('PySide6 Border Example')
    # 創建按鈕
    button = QPushButton('Button with complex border')
    button.setStyleSheet("""
        border: 2px solid black;
        border-top-color: red;
        border-right-color: green;
        border-bottom-color: blue;
        border-left-color: yellow;
        border-top-width: 5px;
        border-right-width: 3px;
        border-bottom-width: 1px;
        border-left-width: 4px;
        border-radius: 15px;
        padding: 10px;
        margin: 20px;
    """)
    # 布局管理
    layout = QVBoxLayout()
    layout.addWidget(button)
    window.setLayout(layout)
    window.show()
    app.exec()

效果圖：

二、控件支持border樣式說明

border的樣式在pyside里面，不是所有控件都支持，是有限制條件的。各控件樣式支持說明

控件	基本樣式	顏色樣式	圖片樣式	圓角樣式	形狀樣式	寬度樣式
QAbstractItemView 子類	√	√	√	√	√	√
QAbstractSpinBox 子類	√	√	√	√	√	√
QCheckBox	√	√	√	√	√	√
QComboBox	√	√	√	√	√	√
QFrame	√	√	√	√	√	√
QGroupBox	√	√	√	√	√	√
QLabel	√	√	√	√	√	√
QLineEdit	√	√	√	√	√	√
QMenu	√	√	√	√	√	√
QMenuBar	√	√	√	√	√	√
QPushButton	√	√	√	√	√	√
QRadioButton	√	√	√	√	√	√
QSplitter	√	√	√	√	√	√
QTextEdit	√	√	√	√	√	√
QToolTip	√	√	√	√	√	√
直接繼承QWidget控件	√	√	×	×	×	×

三、Pyside6 border陰影效果

在PySide6中，邊框投影（shadow）可以通過設置樣式表來實現。雖然樣式表不直接支持CSS中的box-shadow屬性，但可以通過QGraphicsDropShadowEffect類來為組件添加陰影效果。示例：

在線咨詢

上一篇：自定義html中a標簽的下劃線出現效果
下一篇：HTML跳轉到頁面指定位置的幾種方法

您的項目需求

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

整合營銷服務商

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

布局

CSS修飾

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

主題顏色

小結

1.字體設置Font

1).字體系列

2).字體風格

3).字體變形

4).字體加粗

5).字體大小

2.邊框Border

1).邊框形狀

總結

基本樣式

簡寫樣式

邊框四邊寬度樣式

圖像邊框樣式（border-image）

圓角邊框樣式 (border-radius)

您的項目需求