北鸟南游的博客 北鸟南游的博客
首页
  • 前端文章

    • JavaScript
    • Nextjs
  • 界面

    • html
    • css
  • 计算机基础
  • 后端语言
  • linux
  • mysql
  • 工具类
  • 面试相关
  • 图形学入门
  • 入门算法
  • 极客专栏
  • 慕课专栏
  • 电影资源
  • 儿童动漫
  • 英文
  • 棋牌益智
关于我
归档
GitHub (opens new window)
首页
  • 前端文章

    • JavaScript
    • Nextjs
  • 界面

    • html
    • css
  • 计算机基础
  • 后端语言
  • linux
  • mysql
  • 工具类
  • 面试相关
  • 图形学入门
  • 入门算法
  • 极客专栏
  • 慕课专栏
  • 电影资源
  • 儿童动漫
  • 英文
  • 棋牌益智
关于我
归档
GitHub (opens new window)
  • JavaScript

  • 界面

    • HTML
    • CSS
      • css3新特性
        • 1. CSS3 样式属性
          • 透明度 rgba() 函数和 opacity 属性
          • 渐变效果 linear-gradient() 和 radial-gradient()
          • 文字属性
          • background-image 属性
          • 多栏布局
          • CSS3 的媒体查询
        • 2. 过渡 (Transition)
          • 3. 转换 (Transform)
          • 4. 动画 (Animation)
        • 5.布局
      • css选择器
      • flex页面布局详解
      • 学习less
  • front
  • interface
  • css
北鸟南游
2022-10-22
目录

css3 新特性

CSS3 引入了许多新特性和功能,使得网页设计和开发更加高效和丰富。在本文中,我们将详细探讨 CSS3 的一些关键特性及其用法示例。文章将从六个部分来介绍:CSS3 样式属性、过渡、转换、动画、布局如Flex 和 Grid,以及选择器。

# 1. CSS3 样式属性

box-shadow 和 border-image 属性 box-shadow 用于添加阴影效果,border-image 用于给边框添加图像。

.box {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-image: url(border.png) 30 round;
}
1
2
3
4

text-shadow 属性 text-shadow 用于给文字添加阴影效果。

.text {
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
1
2
3

# 透明度 rgba() 函数和 opacity 属性

rgba() 函数用于定义具有透明度的颜色,opacity 属性用于设置元素的透明度。

.transparent-box {
    background-color: rgba(255, 0, 0, 0.5);
    opacity: 0.8;
}
1
2
3
4

# 渐变效果 linear-gradient() 和 radial-gradient()

linear-gradient() 和 radial-gradient() 这两个函数用于创建线性和径向渐变背景

.linear-gradient {
    background: linear-gradient(to right, red, yellow);
}

.radial-gradient {
    background: radial-gradient(circle, red, yellow);
}
1
2
3
4
5
6
7

# 文字属性

  • word-wrap 用于强制长单词换行。
  • text-overflow 用于处理溢出文本。
  • text-shadow 用于添加文字阴影。
  • text-decoration 用于设置文字装饰。
.text {
    word-wrap: break-word;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 2px gray;
    text-decoration: underline;
}
1
2
3
4
5
6

# 使用 @font-face 实现定制字体

@font-face {
    font-family: 'CustomFont';
    src: url('customfont.woff2') format('woff2');
}

.custom-font {
    font-family: 'CustomFont', sans-serif;
}
1
2
3
4
5
6
7
8

# background-image 属性

background-image用于设置背景图像。

.background {
    background-image: url('background.jpg');
}
1
2
3

# 多栏布局

使用 column-count、column-width 和 column-gap 属性可以实现多栏布局。

.columns {
    column-count: 3;
    column-width: 200px;
    column-gap: 20px;
}
1
2
3
4
5

# CSS3 的媒体查询

媒体查询用于为不同的设备和屏幕尺寸应用不同的样式。

@media (max-width: 600px) {
    .responsive {
        font-size: 14px;
    }
}
1
2
3
4
5

# 2. 过渡 (Transition)

transition 属性用于在元素的不同状态之间定义平滑的过渡效果。

.box {
    transition: all 0.3s ease;
}

.box:hover {
    background-color: blue;
    transform: scale(1.1);
}
1
2
3
4
5
6
7
8

# 3. 转换 (Transform)

transform 属性用于旋转、缩放、倾斜或平移元素。

.box {
    transform: rotate(45deg) translateX(50px);
}
1
2
3

# 4. 动画 (Animation)

animation 属性用于定义关键帧动画。

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

.animated-box {
    animation: example 2s infinite alternate;
}
1
2
3
4
5
6
7
8

# 5.布局

Flex 布局 Flex 布局用于实现响应式的弹性布局。

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
1
2
3
4
5

Grid 布局 Grid 布局用于创建复杂的二维布局。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}
1
2
3
4
5

为了更精准的选择目标元素,给目标元素应用以上 CSS3 新增特性,怎么能少了选择器呢? CSS3 也新增了许多选择器,为开发带来了更佳的开发体验。可以查看

编辑 (opens new window)
上次更新: 2025/06/23, 08:09:51
移动端H5的meta标签
css选择器

← 移动端H5的meta标签 css选择器→

最近更新
01
阿豪象棋,棋理新编
06-23
02
index
06-23
03
023-从0到1落地微前端架构,MicroApp实战招聘网站
06-23
更多文章>
Theme by Vdoing | Copyright © 2018-2025 北鸟南游
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式