整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

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/

过本文章，可以掌握以下内容：

  1. pyside6 border样式使用
  2. pyside6 哪些控件支持border属性
  3. 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小时内与您取得联系。

推荐阅读
友情链接 太和区 三原县 大英县 翁源县 兴宁市 镇宁布依族苗族自治县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服