目录
前言
CSS3简介
CSS3功能
1.文本效果
1.1文本阴影
1.2盒子阴影
1.3文本溢出显示
1.4强制文本换行
1.5单词拆分换行
2.背景和边框
2.1背景设置
2.2边框设置
3. 2D/3D转换
3.1 2D转换
3.2 3D转换
4.过渡
5.动画
6.多列布局
7.弹性盒子
8.用户界面
总结
前言
在前端开发中，HTML用于定义网页内容，CSS用于控制网页的样式与布局。CSS能够解决大多数网页布局与样式控制问题，但还是存在一些局限，而CSS3能够解决这些问题，并且提供了更强大更灵活的功能。
CSS3简介
随着Web技术的发展，对于网页样式与布局的要求也在不断提高，而原有的CSS技术面对某些方面的问题也无能为力。为了解决CSS在技术上存在的问题，在1999年，W3C(万维网联盟)组织开发CSS3。
在开发过程中，W3C组织将CSS3划分为多个相互独立的模块，每个模块都针对特定的样式和布局需求进行设计和开发。
CSS3是CSS的最新标准。
CSS3功能
1.文本效果
CSS3提供了新的文本特征，主要有：
- text-shadow ——为文本添加阴影
- box-shadow ——为盒子添加阴影
- text-overflow ——指定如何向用户显示溢出内容
- word-wrap ——强制文本换行
- word-break ——单词拆分换行
1.1文本阴影
在CSS3中，text-shadow属性用于文本设置阴影。
设置阴影语法：
text-shadow: h-shadow v-shadow blur color;
text-shadow属性值：
属性值 描述 h-shadow 必须写。水平阴影的位置。允许负值 v-shadow 必须写。垂直阴影的位置。允许负值 blur 可选。模糊的距离。 color 可选。阴影的颜色。
text-shadow 的使用：
<!DOCTYPE html> <html lang="zn-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 100px; border: 1px solid black; text-shadow: 3px 3px 2px gray; } </style> </head> <body> <div> ABCDEFG </div> </body> </html>
1.2盒子阴影
在CSS3中，box-shadow属性用于文本设置阴影。
设置阴影语法：
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow属性值：
属性值 描述 h-shadow 必须写。水平阴影的位置。允许负值 v-shadow 必须写。垂直阴影的位置。允许负值 blur 可选。模糊的距离。 color 可选。阴影的颜色。 spread 可选。阴影的大小。 inset 可选。从外层的阴影改变为内侧阴影。
box-shadow的使用：
1.外侧阴影：
<!DOCTYPE html> <html lang="zn-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 100px; border: 1px solid black; box-shadow: 3px 3px 2px gray; } </style> </head> <body> <div> </div> </body> </html>
2.内侧阴影：
<!DOCTYPE html> <html lang="zn-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 100px; border: 1px solid black; box-shadow: 3px 3px 2px gray inset; } </style> </head> <body> <div> </div> </body> </html>
1.3文本溢出显示
text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串。
text-overflow语法：
text-overflow: clip|ellipsis|string|initial|inherit;
text-overflow属性值：
属性值 描述 clip 剪切文本 ellipsis 显示省略符号 ... 来代表被修剪的文本 string 使用给定的字符串来代表被修剪的文本 initial 设置为属性默认值 inherit 从父元素继承该属性值
1.4强制文本换行
网页中存在一些比较长的文本，这些文本在一行中无法全部显示出来 。在CSS3中提供了文本强制换行的功能，但可能会将单词拆分。
word-wrap语法：
word-wrap: normal|break-word
word-wrap属性值及描述 属性值 描述 nomal 只在允许的断字点换行 break-word 在长单词或 URL 地址内部进行换行
1.5单词拆分换行
word-break指定非CJK脚本规则。
word-break语法：
word-break: normal|break-all|keep-all;
word-break属性值及描述 属性值 描述 normal 使用浏览器默认的换行规则 break-all 允许在单词内换行 keep-all 只能在半角空格或连字符处换行
2.背景和边框
2.1背景设置
CSS3提供了背景设置功能，通过此功能，我们可以设置各种各样的元素背景。
CSS3提供的背景属性：
- background-image ——添加背景图片
- background-size ——设置背景大小
- background-origin ——指定背景的位置区域
- background-clip ——规定背景的绘制区域
background-image属性：
该属性使元素可以添加背景，添加数量为一张或多张，在属性值位置用 url() 引入需要添加的背景图像。
注意：在添加的所有图像中，第一张显示在最上面。
background-image属性值及描述 属性值 描述 url("URL") 图像的URL none 无图像背景 linear-gradient() 创建线性渐变色图像，可参考linear-gradient()文档
radial-gradient() 创建径向渐变色图像，可参考radial-gradient()文档 repeating-linear-gradient() 创建重复线性渐变色图像，可参考repeating-linear-gradient()文档 repeating-linear-gradient() 创建重复径向渐变色图像，可参考repeating-linear-gradient()文档 inherit 从父级元素继承背景图像
background-size属性：
在CSS3之前，背景大小实际上是由图像大小决定的。但在CSS3中可以自由控制背景的大小。
background-size语法：
background-size: length|percentage|cover|contain;
background-size属性值及描述 值 描述 length 设置背景的宽和高。第一个为宽，其次是高。 percentage 使用百分比设置背景的宽和高。 cover 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 contain 保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
background-origin属性：
background-origin用于设置背景的定位。
background-origin语法：
background-origin: padding-box|border-box|content-box;
background-origin属性值及描述 值 描述 padding-box 背景图像填充框的相对位置 border-box 背景图像边界框的相对位置 content-box 背景图像的相对位置的内容框
background-clip属性：
background-clip用于指定背景的绘制区域。
background-clip语法：
background-clip: border-box|padding-box|content-box;
background-clip属性值及描述 值 描述 border-box 默认值。在边框出绘制。 padding-box 在填充处绘制 content-box 在内容框处绘制
2.2边框设置
在CSS中，我们可以设置边框的大小、颜色、厚度。在CSS3中，我们可以设置圆角边框、边框图片。
边框设置属性：
- border-radius ——设置圆角边框
- border-image ——设置边框图片
设置圆角边框：
语法： border-radius: 1-4 length|% / 1-4 length|%;
可以使用像素或百分比设置圆角。
注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
<!DOCTYPE html> <html lang="zn-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 100px; margin: 50px; padding: 20px; background: green; border-radius: 25px; } </style> </head> <body> <div class="d1">圆角</div> </body> </html>
设置边界图片：
语法：border-image: source slice width outset repeat|initial|inherit;
边界图片可以设置其路径、偏移位置、重复、拉伸与铺满。
具体使用方法，请参考border-image文档
3. 2D/3D转换
3.1 2D转换
所谓2D转换，就是HTML元素在二位平面内进行移动、旋转、放缩、倾斜。
使用transform属性定义转换，以下是2D转换方法：
- translate()——移动
- rotate()——旋转
- scale()——放缩
- skew()——倾斜
- matrix()——2D转换方法的合并
移动：元素从当前位置移动。
translate(x,y) 定义元素沿x,y轴移动；
translateX(n) 定义元素沿X轴移动；
translateY(n) 定义元素沿Y轴移动。
旋转：元素以顺（逆）时针旋转。
rotate(n deg)。
当n为正值时，元素在当前位置按 顺时针 旋转 n度，n 为负值时，元素在当前位置按 顺时针 旋转 n度.
放缩：元素在原大小的基础上进行放大或缩小。
scale(m,n) ；
元素在x轴上放大（缩小）m倍，在y轴上放大（缩小）n倍。
倾斜：元素分别在x轴和y轴倾斜。
skew(m deg,n deg)——元素在x轴上倾斜m度，在y轴上倾斜n度。
skewX(n deg)——元素在X轴倾斜n度。
skewY(n deg)——元素在Y轴倾斜n度。
3.2 3D转换
3D转换定义元素在X、Y、Z轴上进行转换，在 2D转换的基础上延伸到三维立体空间中，转换方法与2D转换无太大区别。
想要了解3D转换，请前往3D转换文档
4.过渡
过渡是元素从一种样式逐渐改变为另一种的效果。
CSS3的过渡功能让我们需要过渡画面的时候无需使用JavaScript等其他技术。
CSS3 使用transition属性定义实现过渡。
想要实现过渡，必须在transition属性中添加 要添加效果的CSS属性 和 效果的持续时间。可以在transition中添加多项需要过渡想过的属性，中间用逗号隔开。
过渡属性：
- transition ——过渡属性的简写形式
- transition-duration ——过渡花费的时间
- transition-property ——需要过的CSS属性
- transition-delay ——过渡开始时间
<!DOCTYPE html> <html lang="zn-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1 { width: 100px; height: 100px; background-color: dodgerblue; border-radius: 5px; transition: width 2s,height 2s; text-align: center; padding: 10px; } .div1:hover { width: 300px; } </style> </head> <body> <div class="div1" onclick="toBig(this)">过渡</div> </body> </html>
5.动画
CSS3 使HTML文档的元素能够在页面中表现出动画效果，取代了多数网页动画的效果。
为了创建 CSS3动画，必须了解@keyframes 规则。该规则是创建动画，它可以指定一个CSS样式和动画从当前更改为新的样式。
想要真正实现动画效果，必须在@keyframes 规则创建动画时使用animation属性将其与元素绑定到一个选择器上，否则动画不会由任何效果。
在设置动画的各个阶段的状态时，建议使用百分比对该阶段进行描述：
也可以使用from...to...进行设置
动画的使用实例：
<!DOCTYPE html> <html lang="zn-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 100px; border-radius: 5px; background-color: dodgerblue; animation: san 5s; position: relative; /* 动画循环次数 */ animation-iteration-count: 5; } @keyframes san { 0% {background-color: dodgerblue;left: 0px;top: 0px;} 25% {background-color: yellow;left: 500px;top: 0;} 50% {background-color: green;left: 500px;top: 500px;} 75% {background-color: aqua;left: 0;top: 500px;} 100% {background-color: red;left: 0;top: 0;} } </style> </head> <body> <div></div> </body> </html>
6.多列布局
CSS3 的多列布局可以使文本可以像报刊一样分列显示，在网页设计过程中为布局设计提供了便利。
多列属性：
- column-count ——定义列数
- column-gap ——定义列间距
- column-rule-style ——定义列边框样式
- column-rule-width——定义列边框厚度
- column-rule-color——定义列边框颜色
- column-span——定义元素跨越的列数
- column-width——定义列宽
了解多列属性，请前往多列文档
<!DOCTYPE html> <html lang="zn-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { width: 1000px; margin: auto; } div { /* 创建多列 */ column-count: 3; /* 控制列间距 */ column-gap: 40px; /* 控制列边框样式 */ column-rule-style: dotted; /* 控制列边框厚度 */ column-rule-width: 3px; /* 控制列边框颜色 */ column-rule-color: lightblue; } h2 { column-span: all; } </style> </head> <body> <div> <h2> h2 跨越所有列ASaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h2> “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。” </div> </body> </html>
7.弹性盒子
弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为时所推出的新型布局方式。
弹性盒子能够更有效地对容器中地子元素进行排序、分配空白空间。
弹性盒子由弹性容器和弹性子元素组成，容器通过将display的属性值设置为 flex 或 inline-flex将其定义为弹性容器。
默认情况下，弹性子元素在弹性盒子内一行显示。
弹性盒子属性介绍：
flex-direction属性：
定义弹性子元素在父容器中的位置。
属性值：
- row——横向从左到右排列
- row-reverse——反转横向排列
- olumn——纵向排列
- column-reverse——反转纵向排列
justify-content属性：
定义弹性子元素对齐方式。
属性值：
- flex-start：弹性项目向行头紧挨着填充。
- center：弹性项目居中紧挨着填充。
- flex-end：弹性项目向行尾紧挨着填充。
- space-between：弹性项目平均分布在该行上。
- space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。
align-items属性：定义弹性子元素在纵向的对齐方式。
属性值：
- flex-start：子元素的纵轴方向的起始位置紧靠纵轴起始边界（顶部）
- center：子元素在纵轴上居中放置
- flex-end：子元素的纵轴方向的起始位置紧靠纵轴结束边界（底部）
- stretch：子元素的宽和高可能会接近容器的边框
flex-wrap 属性：
用于定义子元素的换行方式。
属性值：
- nowrap：子元素不会换行，可能会溢出
- wrap：弹性盒子为多行，当一行容不下子元素时会自动从下一行开始排列
- wrap-reverse ：反转 wrap 排列。
详细弹性盒子知识，请参考弹性盒子文档
8.用户界面
CSS3 提供了新的界面属性来调整元素尺寸、框设计。
用户界面属性：
- resize
- box-sizing
- outline-offset
ressize——调整尺寸
resize定义一个元素是否允许用户去调整它的大小。
resize属性值：
- none——用户无法调整元素的尺寸。
- both——用户可调整元素的高度和宽度。
- horizontal——用户可调整元素的宽度。
- vertical——用户可调整元素的高度。
box-sizing属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框。具体可参考box-sizingwendang
outline-offse属性定义轮廓并绘制超出边框边缘，值得注意的是：轮廓不会占用空间，而且可以是除矩形外的其他图形。
总结
CSS3作为CSS的最新标准，提供了更有力的开发功能。在样式调整方面，它给了人们更好的视觉体验，其中2D/3D转换、过渡与动画给了我对CSS新的理解，原来CSS不仅仅可以显示简单样式，使用CSS3还可以做出一些优美的动画表现。在布局方面，多列给我们提供了极大便利，而弹性盒子让我们能够更好地利用页面中的空白空间，这种新型布局方式对网页设计非常重要。希望Web开发能够发展得更好，同时也希望CSS能够给我们带来更多便利。
