【全面】CSS3新增了哪些新特性?

目录

一、选择器的扩展

[1. 属性选择器](#1. 属性选择器)

[2. 伪类选择器](#2. 伪类选择器)

[3. 伪元素选择器](#3. 伪元素选择器)

二、盒子模型的增强

[1. box-sizing属性](#1. box-sizing属性)

[2. 边框圆角(border-radius)](#2. 边框圆角(border-radius))

[3. 盒阴影(box-shadow)](#3. 盒阴影(box-shadow))

三、过渡和动画效果

[1. 过渡效果](#1. 过渡效果)

[2. 动画效果](#2. 动画效果)

四、响应式布局

[1. 媒体查询(media query)](#1. 媒体查询(media query))

[2. 弹性布局(Flexbox)](#2. 弹性布局(Flexbox))


CSS3 是 CSS (Cascading Style Sheets) 的第三个主要版本,引入了许多令人兴奋的新特性和功能。在本文中,我们将介绍 CSS3 中一些重要的新增特性,并提供相应的代码示例。

一、选择器的扩展

CSS3 引入了一些新的选择器,使得选择元素更加便捷和灵活。

1. 属性选择器

属性选择器允许按照元素的某个属性来选择元素。例如,可以根据元素的属性值选择特定的元素。

css 复制代码
/* 选择所有带有 target 属性的链接 */
a[target] {
  color: blue;
}

2. 伪类选择器

CSS3 引入了更多的伪类选择器,可以选择元素的特殊状态或位置。例如,可以选择第一个子元素、鼠标悬停的元素等。

css 复制代码
/* 选择第一个段落元素 */
p:first-child {
  font-weight: bold;
}

/* 当鼠标悬停在链接上时改变样式 */
a:hover {
  color: red;
}

3. 伪元素选择器

可以用于选择元素的特定部分,例如元素的第一个字、第一个字母、之前的空白等。

css 复制代码
p::first-letter {  
  /* 第一个字母的样式规则 */  
}

二、盒子模型的增强

CSS3对盒子模型进行了一些改进,使得我们能够更加灵活地控制元素的布局和尺寸。

1. box-sizing属性

可以用于更改元素的盒子模型算法,使得元素的宽度和高度包括边框和内边距。

默认值是content-box,这意味着元素的宽度和高度只包括内容的宽度和高度,而不包括边框(border)、内边距(padding)和外边距(margin)。

如果将box-sizing属性的值设置为border-box,则元素的宽度和高度将包括内容的宽度和高度、边框和内边距,但不包括外边距。

css 复制代码
div {  
  box-sizing: border-box;  
}

2. 边框圆角(border-radius)

通过设置边框圆角属性,可以使元素的边框呈现圆角效果。

css 复制代码
/* 给一个 div 元素设置圆角边框 */
div {
  border-radius: 10px;
}

3. 盒阴影(box-shadow)

用于给元素添加阴影效果。阴影可以设置水平和垂直偏移量、阴影的模糊程度、阴影的颜色等。

css 复制代码
/* 语法 */
box-shadow: h-offset v-offset blur spread color;

/* 给一个标题添加盒阴影 */
h1 {
  box-shadow: 5px 5px 5px #888888;
}
  • h-offset:水平偏移量,阴影在水平方向上偏移的距离。如果是负值,阴影将在元素左边。
  • v-offset:垂直偏移量,阴影在垂直方向上偏移的距离。如果是负值,阴影将在元素的上方。
  • blur:阴影的模糊程度。值越大,阴影边缘越模糊,但也越向外扩散。
  • spread:阴影的大小。正值会扩大阴影,负值会缩小阴影。
  • color:阴影的颜色。

三、过渡和动画效果

CSS3 引入了过渡(transition)和动画(animation)功能,使得元素的状态改变更加平滑和生动。

1. 过渡效果

通过设置过渡属性,可以在元素状态改变时实现平滑的过渡效果。

css 复制代码
/* 当鼠标悬停在链接上时,改变颜色过渡效果 */
div {  
  transition: background-color 0.5s ease;  
}  
div:hover {  
  background-color: #f00;  
}

2. 动画效果

通过使用关键帧动画(@keyframes),可以创建自定义的动画效果。

css 复制代码
/* 创建一个旋转动画效果 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 应用旋转动画到一个图像 */
img {
  animation: spin 2s linear infinite;
}

四、响应式布局

CSS3 引入了响应式布局的功能,使得网页能够根据不同设备的屏幕大小和分辨率进行自适应布局。

1. 媒体查询(media query)

用于针对不同的媒体类型定义不同的样式。媒体查询可以针对不同的屏幕尺寸、设备类型、分辨率等条件来应用不同的样式规则。

css 复制代码
/* 当浏览器宽度小于 600px 时,改变背景颜色 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

2. 弹性布局(Flexbox)

它是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行。

Flexbox模型中的元素可以是行或者列,并且可以灵活地改变大小和形状。使用Flexbox布局,可以轻松地实现元素的水平和垂直居中、元素的重新排序、元素的扩展等操作。

css 复制代码
/* 创建一个使用 Flexbox 的水平布局 */
.container {
  display: flex;
  justify-content: space-between;
}
相关推荐
gqkmiss4 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃10 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰14 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye21 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm23 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生1 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互