css3从创衣服到设计衣服

1.css3进阶

1.css3介绍

CSS3是CSS（层叠样式表）的第三个主要版本，是一种用于描述网页样式和布局的技术。相比于CSS2，CSS3引入了许多新的功能和特性，为开发者提供了更多的设计选择和交互效果。以下是CSS3的一些主要特点和功能：

1. 选择器：CSS3引入了一些新的选择器，如属性选择器、伪类选择器和伪元素选择器，使开发者能够更精确地选择和操作元素。

2. 盒子模型：CSS3增强了盒子模型，引入了圆角边框（border-radius）和阴影效果（box-shadow），使元素的样式更具丰富性。

3. 渐变效果：CSS3支持线性渐变（linear-gradient）和径向渐变（radial-gradient），使开发者能够在背景和文本中创建平滑的过渡效果。

4. 过渡和动画：CSS3引入了过渡（transition）和动画（animation）属性，使开发者能够创建平滑的元素状态过渡和动画效果，无需使用JavaScript。

5. 多列布局：CSS3提供了多列布局（multi-column layout）的功能，使开发者能够将内容分为多列，实现杂志风格的布局效果。

6. 媒体查询：CSS3引入了媒体查询（media queries），使开发者能够根据不同的设备和屏幕尺寸，为不同的设备提供不同的样式和布局。

7. 字体和文本效果：CSS3提供了更多的字体选择和文本效果，如自定义字体（@font-face）、文字阴影（text-shadow）和文字溢出效果（text-overflow）。

8. 弹性盒子布局：CSS3引入了弹性盒子布局（flexbox），使开发者能够更轻松地创建响应式的布局和对齐方式。

以上只是CSS3的一部分功能，它为网页设计和布局提供了更多的灵活性和创造力。CSS3的广泛支持使得开发者能够创建出更吸引人、交互性更强的网页和应用程序。

 1.新增长度单位

CSS3中引入了多种新的长度单位，用于在样式表中指定元素的尺寸。以下是一些CSS3中常用的长度单位：
1. **px（像素）：** 绝对长度单位，相对于显示器屏幕分辨率的一个像素。
2. **em（相对长度单位）：** 相对于元素自身的字体大小，例如，1em等于当前元素的字体大小。
3. **rem（相对长度单位）：** 相对于根元素（html元素）的字体大小，可以解决em的继承问题。
4. **%（百分比）：** 相对于父元素的尺寸。例如，width: 50%表示元素宽度为父元素宽度的50%。
5. **vw（视口宽度单位）：** 相对于视口宽度的百分比，1vw等于视口宽度的1%。
6. **vh（视口高度单位）：** 相对于视口高度的百分比，1vh等于视口高度的1%。
7. **vmin（视口宽度和高度中较小值的百分比）：** 相对于视口宽度和高度中较小值的百分比。
8. **vmax（视口宽度和高度中较大值的百分比）：** 相对于视口宽度和高度中较大值的百分比。
9. **ch（字符“0”的宽度）：** 相对于“0”字符的宽度，通常用于定宽字体的尺寸设置。
10. **ex（小写字母x的高度）：** 相对于小写字母x的高度，通常用于字体相关的尺寸设置。
11. **cm（厘米）：** 绝对长度单位，1cm等于1厘米。
12. **mm（毫米）：** 绝对长度单位，1mm等于1毫米。
13. **in（英寸）：** 绝对长度单位，1in等于1英寸。
14. **pt（磅）：** 绝对长度单位，1pt等于1/72英寸。
15. **pc（派卡）：** 绝对长度单位，1pc等于12点（1/6英寸）。
这些长度单位可以在CSS中用于指定元素的尺寸，根据具体需求选择合适的单位以实现页面样式的设计。

 2.新增盒子属性

CSS3引入了一些新的盒子属性，用于控制元素的盒子模型和布局。以下是一些CSS3中新增的盒子属性：
1. **box-sizing：** 用于指定元素的盒子模型计算方式。默认值为`content-box`，表示宽度和高度仅包括内容，不包括边框和内边距。可以设置为`border-box`，表示宽度和高度包括内容、边框和内边距。

2. **box-shadow：** 用于为元素添加阴影效果。可以指定阴影的颜色、位置、模糊半径和扩展半径。

3. **border-radius：** 用于为元素的边框添加圆角效果。可以指定每个角的圆角半径，也可以使用`%`值相对于元素的宽度或高度。

4. **box-decoration-break：** 用于控制元素的装饰盒子断裂的方式。可以设置为`slice`，表示装饰盒子在断裂处被切割；或者设置为`clone`，表示装饰盒子在断裂处被克隆。

5. **overflow-x、overflow-y：** 用于控制元素内容在溢出时的显示方式。`overflow-x`用于控制水平方向上的溢出，`overflow-y`用于控制垂直方向上的溢出。可以设置为`visible`（默认值，内容溢出不裁剪）、`hidden`（内容溢出裁剪）、`scroll`（始终显示滚动条）或`auto`（根据内容是否溢出自动显示滚动条）

。
6. **box-align、box-pack：** 用于控制弹性布局容器中项目的对齐方式。`box-align`用于指定项目在交叉轴上的对齐方式，可以设置为`start`、`end`、`center`、`baseline`或`stretch`。`box-pack`用于指定项目在主轴上的对齐方式，可以设置为`start`、`end`、`center`、`justify`或`distribute`。

7. **box-flex、box-flex-group：** 用于控制弹性布局容器中项目的伸缩性。`box-flex`用于指定项目的伸缩比例，默认值为0，表示不伸缩。`box-flex-group`用于指定项目所属的伸缩组。

这些是CSS3中新增的一些盒子属性，可用于更灵活地控制元素的盒子模型、布局和效果。根据具体需求，可以使用这些属性来实现各种独特的设计效果。

 3.新增背景属性

CSS3引入了一些新的背景属性，用于控制元素的背景样式和效果。以下是一些CSS3中新增的背景属性：
1. **background-size：** 用于指定背景图片的大小。可以设置为具体的长度值（如像素、百分比），也可以使用关键字`cover`（将背景图片缩放到完全覆盖背景区域）或`contain`（将背景图片缩放到完全包含在背景区域内）。
2. **background-origin：** 用于指定背景图片的定位原点。可以设置为`padding-box`（相对于内边距框定位）、`border-box`（相对于边框框定位）或`content-box`（相对于内容框定位）。
3. **background-clip：** 用于指定背景图片的裁剪区域。可以设置为`border-box`（裁剪到边框框内）、`padding-box`（裁剪到内边距框内）或`content-box`（裁剪到内容框内）。
4. **background-origin、background-clip的简写：** 可以通过`background`属性的简写形式同时设置`background-origin`和`background-clip`。
5. **background-repeat：** 用于指定背景图片的重复方式。可以设置为`repeat`（默认值，平铺重复）、`repeat-x`（水平方向重复）、`repeat-y`（垂直方向重复）或`no-repeat`（不重复）。
6. **background-position：** 用于指定背景图片的位置。可以设置为具体的长度值（如像素、百分比），也可以使用关键字`left`、`center`、`right`、`top`、`bottom`等。
7. **background-attachment：** 用于指定背景图片的滚动方式。可以设置为`scroll`（默认值，背景图片随元素内容一起滚动）或`fixed`（背景图片固定不动，不随元素内容滚动）。
8. **background-image：** 用于指定背景图片的URL。可以设置为具体的图片路径或使用`linear-gradient()`、`radial-gradient()`等渐变函数。
这些是CSS3中新增的一些背景属性，可用于更灵活地控制元素的背景样式和效果。通过组合和调整这些属性，可以实现各种独特的背景效果。

4.新增边框属性

CSS3引入了一些新的边框属性，用于控制元素的边框样式和效果。以下是一些CSS3中新增的边框属性：
1. **border-radius：** 用于为元素的边框添加圆角效果。可以指定每个角的圆角半径，也可以使用百分比值相对于元素的宽度或高度。
2. **border-image：** 用于指定边框的图像作为边框样式。可以设置边框图像的路径、裁剪区域、填充方式、边框宽度等属性。
3. **border-image-slice：** 用于指定边框图像的裁剪区域。可以设置为具体的长度值或百分比值，用于确定边框图像的裁剪区域。
4. **border-image-source：** 用于指定边框图像的路径。可以设置为具体的图片路径或使用`linear-gradient()`、`radial-gradient()`等渐变函数。
5. **border-image-width：** 用于指定边框图像的宽度。可以设置为具体的长度值、百分比值或关键字`auto`，用于确定边框图像的宽度。
6. **border-image-outset：** 用于指定边框图像的外边距。可以设置为具体的长度值或百分比值，用于确定边框图像的外边距。
7. **border-image-repeat：** 用于指定边框图像的重复方式。可以设置为`stretch`（拉伸填充边框）、`repeat`（平铺填充边框）或`round`（根据边框尺寸自动调整重复次数）。
8. **box-shadow：** 用于为元素添加阴影效果。可以指定阴影的颜色、位置、模糊半径和扩展半径。
这些是CSS3中新增的一些边框属性，可用于更灵活地控制元素的边框样式和效果。通过组合和调整这些属性，可以实现各种独特的边框效果。

5.新增文本属性

 

CSS3引入了一些新的文本属性，用于控制元素的文本样式和效果。以下是一些CSS3中新增的文本属性：
1. **text-overflow：** 用于控制文本溢出时的显示方式。可以设置为`clip`（默认值，文本溢出时隐藏）、`ellipsis`（使用省略号表示被截断的文本）或`fade`（渐变效果显示被截断的文本）。
2. **word-break：** 用于控制文本在换行时的断词方式。可以设置为`normal`（默认值，根据空格和连字符断词）、`break-all`（强制换行，无视空格和连字符）或`keep-all`（连字符不断行）。
3. **word-wrap：** 用于控制非CJK（中日韩文字）文本的换行方式。可以设置为`normal`（默认值，按照空格和连字符断词换行）或`break-word`（根据单词断词换行）。
4. **text-shadow：** 用于为文本添加阴影效果。可以指定阴影的颜色、位置、模糊半径和扩展半径。
5. **text-align-last：** 用于指定文本在行内最后一行的对齐方式。可以设置为`auto`（默认值，按照`text-align`属性对齐）、`left`、`right`、`center`、`justify`或`start`。
6. **text-justify：** 用于指定文本对齐方式。可以设置为`auto`（默认值，按照`text-align`属性对齐）、`inter-word`（单词间添加额外的空格以实现对齐）、`inter-ideograph`（汉字间添加额外的空格以实现对齐）或`distribute`（在每个单词之间平均分布空格以实现对齐）。
7. **text-emphasis：** 用于为文本添加强调效果。可以设置为具体的颜色值或关键字`dot`、`circle`、`double-circle`、`triangle`等。
8. **text-orientation：** 用于指定文本的方向。可以设置为`mixed`（默认值，根据字符的方向自动调整）或`upright`（垂直方向排列文本）。
这些是CSS3中新增的一些文本属性，可用于更灵活地控制元素的文本样式和效果。通过组合和调整这些属性，可以实现各种独特的文本效果。