css3 都有哪些新属性-个人在线分享

1. css3 都有哪些新属性
- 1.1. 圆角边框 (border-radius)
- 1.2. 盒子阴影 (box-shadow)
- 1.3. 文本阴影 (text-shadow)
- 1.4. 响应式设计相关属性
- 1.5. 渐变背景 (gradient backgrounds)
- 1.6. 透明度 (opacity 和 rgba/hsla)
- 1.7. 多列布局 (column-count, column-gap, etc.)
- 1.8. 变换 (transform)
- 1.9. 过渡 (transition)
- 1.10. 动画 (@keyframes + animation)
- 1.11. font-face属性
2. css3 有哪些响应式设计相关属性
- 2.1. Media Queries (@media)
- 2.2. Flexbox (display: flex)
- 2.3. Grid Layout (display: grid)
- 2.4. Viewport Units (vw, vh, vmin, vmax)
- 2.5. ** calc()**
- 2.6. rem单位
3. css3 媒体查询
- 3.1. 基本语法
- 3.2. 常用媒体特性
- 3.3. 示例
- 3.4. 注意事项
4. css3 多列布局
5. css3 动画
- 5.1. 构成
  - 5.1.1. @keyframes规则:
  - 5.1.2. animation-name:
  - 5.1.3. animation-duration:
  - 5.1.4. animation-timing-function:
  - 5.1.5. animation-iteration-count:

1. css3 都有哪些新属性

css3 都有哪些新属性插图

CSS3引入了许多新属性，极大地丰富了网页设计的能力，提高了用户体验。

以下是一些关键的CSS3新属性及其简要说明：

1.1. 圆角边框 (`border-radius`)

使元素的边框变为圆角。例如，border-radius: 10px; 将元素的四个角都设置为10像素的圆角。

1.2. 盒子阴影 (`box-shadow`)

给元素添加阴影效果，增加深度和维度。例如，box-shadow: 5px 5px 10px #888888; 表示阴影偏移5像素右和下，模糊距离为10像素，颜色为灰色。

1.3. 文本阴影 (`text-shadow`)

给文本添加阴影，可用于创建立体或发光效果。

例如，text-shadow: 2px 2px 4px #000000; 会使文本产生向右下方偏移2像素，模糊4像素的黑色阴影。

1.4. 响应式设计相关属性

flexbox (flex布局)：如 display: flex; 用于创建灵活且可响应的布局。
grid (网格布局)：如 display: grid; 提供了一种定义二维布局的方法。
media queries：如 @media screen and (max-width: 600px) {...} 可根据不同屏幕尺寸应用不同样式。

1.5. 渐变背景 (`gradient backgrounds`)

使用 linear-gradient() 或 radial-gradient() 创建线性或径向渐变背景。例如，background: linear-gradient(to right, red, orange); 创建从左到右红色渐变至橙色的背景。

1.6. 透明度 (`opacity` 和 `rgba/hsla`)

opacity: 0.5; 控制元素的整体透明度。
background-color: rgba(0, 0, 0, 0.5); 使用RGBA颜色模式设置带有透明度的背景颜色。

1.7. 多列布局 (`column-count`, `column-gap`, etc.)

用于实现文本的多列布局，如 column-count: 3; 将内容分为三列显示。

1.8. 变换 (`transform`)

用于旋转、缩放、倾斜或移动元素。例如，transform: rotate(45deg); 旋转元素45度。

1.9. 过渡 (`transition`)

添加平滑的动画效果到CSS属性的变化，如 transition: background-color 0.5s ease; 在背景颜色变化时添加0.5秒的过渡效果。

1.10. 动画 (`@keyframes` + `animation`)

创建复杂的动画序列，如 @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } 定义了一个淡入动画，然后通过 animation: fadeIn 2s; 应用到元素上。

1.11. font-face属性

font-face属性：定义自己的字体。

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

这些只是CSS3众多新功能的一部分，还有更多属性如 border-image, calc() 函数，以及针对字体(@font-face)、滤镜效果 (filter) 等的改进，大大增强了CSS的功能性和表现力。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

2. css3 有哪些响应式设计相关属性

css3 都有哪些新属性插图(1)

CSS3 引入了多项特性来支持响应式设计，使得网页能够根据不同的设备特性和屏幕尺寸自动调整布局和样式。

以下是几个关键的响应式设计相关属性及其示例：

2.1. Media Queries (`@media`)

Media Queries 是响应式设计的核心，它允许你根据不同的条件应用不同的CSS规则。

例如，你可以基于屏幕宽度调整布局：

@media screen and (max-width: 600px) {
    /* 当屏幕宽度小于或等于600px时的样式 */
    .content {
    width: 100%;
    padding: 0 10px;
    }
}

2.2. Flexbox (`display: flex`)

Flexbox（弹性盒子模型）提供了一种更加有效的方式来布局、对齐和分配容器内项目的空间，不论它们的大小如何：

.container {
    display: flex;
    flex-wrap: wrap;
}
.item {
    flex: 1 0 200px; /* 使项目能够伸缩并设定最小宽度 */
}

2.3. Grid Layout (`display: grid`)

网格布局提供了创建二维布局结构的能力，非常适合响应式设计中的复杂布局：

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

2.4. Viewport Units (`vw`, `vh`, `vmin`, `vmax`)

视口单位让你能够基于视口尺寸来设定元素的尺寸，而不是固定的像素值：

.header {
    font-size: 3vw; /* 文字大小会随视口宽度变化 */
}

2.5. calc()

calc() 函数可以在CSS中执行计算，帮助创建动态的布局和响应式的尺寸：

.element {
    width: calc(100% - 60px); /* 元素宽度为视口宽度减去60像素 */
}

2.6. rem单位

使用 rem（根元素的em）作为单位，可以使元素尺寸相对于页面根字体大小缩放，便于在不同屏幕尺寸上调整布局：

html {
    font-size: 16px;
}
.section {
    width: 30rem; /* 宽度为根字体大小的30倍 */
}

这些属性和功能结合使用，构成了CSS3响应式设计的基础，使开发者能够创建出适应各种设备和屏幕尺寸的灵活网页布局。

3. css3 媒体查询

css3 都有哪些新属性插图(2)

CSS3中的媒体查询（Media Queries）是一种强大的技术，它允许开发者根据不同的设备特征（如视口尺寸、设备像素比、设备方向等）来应用不同的CSS样式。

这对于创建响应式网页设计至关重要，确保网站在多种设备上，无论是桌面、平板、手机还是其他屏幕类型，都能提供良好的用户体验。下面是关于CSS3媒体查询的一些基本概念和用法指南：

3.1. 基本语法

媒体查询的基本结构使用@media规则，后跟一个或多个媒体特性（可选的媒体类型和媒体特性值），以及大括号内的CSS样式声明。

@media media-type and (media-feature: value) {
  /* CSS rules */
}

media-type 是可选的，指定了目标设备类型，如 screen、print、speech 等，现代Web开发中通常省略，因为大多数情况下都是针对屏幕。
media-feature 是媒体特征，例如 width、height、orientation、resolution 等。
value 是与媒体特征相关的具体值或者范围。

3.2. 常用媒体特性

css3 都有哪些新属性插图(3)

min-width 和 max-width: 设定样式应用于最小/最大宽度以上的屏幕。
min-height 和 max-height: 同上，但针对高度。
orientation: 检测设备是横屏(landscape)还是竖屏(portrait)。
resolution: 设备的分辨率，可以是dpi、dpcm或dppx单位。
color 和 color-index: 针对设备的颜色能力。

3.3. 示例

/* 针对屏幕宽度至少为600px的设备 */
@media (min-width: 600px) {
  body {
    font-size: 18px;
  }
}

/* 针对横屏设备 */
@media (orientation: landscape) {
  .sidebar {
    width: 30%;
  }
}

/* 针对高分辨率屏幕 */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url(high-res-logo.png);
  }
}

3.4. 注意事项

媒体查询可以嵌套，以实现更复杂的逻辑。
使用 and、,、not、only 这些关键字来组合和限制查询条件。
通常在样式表的底部放置媒体查询，以确保它们能覆盖之前定义的样式（遵循CSS的层叠原则）。
确保设置 <meta name="viewport" 标签，以让媒体查询在移动设备上正确工作。

通过合理运用媒体查询，开发者能够创建灵活且适应性强的界面，满足多样化的用户需求。

4. css3 多列布局

CSS3的多列布局允许开发者轻松地将文本或者其他内容分割成多个列，类似于报纸的排版效果，提高内容的可读性和页面的美观性。

下面是一个使用CSS3多列布局属性的简单示例：

假设我们想在一个元素中创建一个包含三列的布局，每列宽度自动调整，列间有10像素的间隔，并且希望列之间有一条1像素宽的浅灰色线条作为分隔线。

HTML部分：

<div class="multi-column">
  <p>这里是第一段文本内容...</p>
  <p>这里是第二段文本内容...</p>
  
</div>

CSS部分：

.multi-column {
  /* 指定列数 */
  column-count: 3;
  
  /* 列间距 */
  column-gap: 10px;
  
  /* 列间边框（颜色、宽度、样式） */
  column-rule: 1px solid #ccc;
  
  /* 可选：如果需要，可以设置列的最小宽度 */
  /* column-width: 200px; 如果设置了column-width和column-count，浏览器将优先考虑column-count */
  
  /* 自动填充内容到各列，保持列的高度相等（根据浏览器支持情况可能有所不同） */
  column-fill: balance;
}

在这个例子中，.multi-column类应用了多列布局的属性，使得其中的内容自动分为三列显示，每列之间有10像素的间隔，并有一条1像素宽的浅灰色线条作为列之间的分隔。column-fill: balance;属性尝试平衡各列的高度，但请注意，这个属性的支持度在不同浏览器中可能有所差异。

多列布局非常适合长篇文章、新闻列表或任何需要大量文本内容优雅排版的场景。

5. css3 动画

CSS3动画是通过关键帧、动画属性等来实现元素在页面上的动态效果，无需使用JavaScript或其他脚本语言。

下面是一个简单的CSS3动画示例，展示如何让一个盒子从左到右平滑移动：

HTML部分:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画示例</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    left: 0; /* 初始位置 */
  }

  /* 定义动画 */
  @keyframes moveRight {
    0% {left: 0;} /* 动画开始时的位置 */
    100% {left: 200px;} /* 动画结束时的位置 */
  }

  /* 应用动画 */
  .animated {
    animation-name: moveRight; /* 关键帧名称 */
    animation-duration: 2s; /* 动画持续时间 */
    animation-timing-function: ease-in-out; /* 动画速度曲线 */
    animation-iteration-count: infinite; /* 动画重复次数，infinite表示无限次 */
  }
</style>
</head>
<body>

<div class="box animated"></div> 

</body>
</html>

5.1. 构成

5.1.1. @keyframes规则:

@keyframes moveRight {...} 定义了一个名为moveRight的关键帧动画，描述了元素从初始位置（left: 0）平滑移动到最终位置（left: 200px）的过程。

5.1.2. animation-name:

.animated {animation-name: moveRight;} 指定了要绑定到元素的动画名称，这里是moveRight。

5.1.3. animation-duration:

.animated {animation-duration: 2s;} 设置了动画的持续时间为2秒。

5.1.4. animation-timing-function:

.animated {animation-timing-function: ease-in-out;} 控制动画的速度曲线，这里设置为先慢后快再慢的效果。

5.1.5. animation-iteration-count:

.animated {animation-iteration-count: infinite;} 设定了动画的重复次数，infinite表示动画将无限次重复。

当页面加载时，带有.animated类的盒子元素会按照定义好的动画规则从左侧平滑移动到右侧，由于设置了无限循环，它会不停地来回移动。

一	二	三	四	五	六	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

1. css3 都有哪些新属性

1.1. 圆角边框 (border-radius)

1.2. 盒子阴影 (box-shadow)

1.3. 文本阴影 (text-shadow)