CSS3初体验

CSS3是个啥

CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

CSS3是在CSS的接触上增加了很多新的特性，与低版本的CSS并不冲突。

CSS3文本

text-overflow

1.clip: 隐藏超出文本
2.ellipsis: 超出部分使用省略号
例子（超出文本内容使用省略号代替）
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;

word-wrap

word-wrap 属性允许长单词或 URL 地址换行到下一行
1.normal: 只在允许的断字点换行
2.break-word: 在长单词或 URL 地址内部进行换行

word-break

word-break 属性规定自动换行的处理方法
1.normal 使用浏览器默认的换行规则。
2.break-all 允许在单词内换行
3.keep-all 只能在半角空格或连字符处换行

white-space

white-space 属性设置如何处理元素内的空白
1.normal 默认。连续空白会被浏览器忽略
2.pre 空白会被浏览器保留。
3.nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止
4.pre-wrap 保留空白符序列，但是正常地进行换行
5.pre-line 合并空白符序列，但是保留换行符
6.inherit 规定应该从父元素继承 white-space 属性的值

text-shadow

text-shadow: 颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)
text-shadow: x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)
可以设置偏移，颜色，阴影大小

CSS3 边框

CSS在很大程度上拓展了border的样式，让我们可以做出更加丰富的效果

border-radius

圆角是做网页永远绕不过的话题，以前基本是通过背景图片做的，有了CSS3后简单属性搞定，我们可以通过border-radius设置元素的圆角半径
order-radius是缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来

box-shadow

box-shadow属性至多有6个参数设置
1.阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值inset,就是将外阴影变成内阴影
2.X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边
3.Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部
4.阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊
5.阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小
6.阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样

box-sizing

这个属性多少和边框也相关，传统的盒模型width就是指内容区域宽度，和padding、border没有关系，但是这在布局上带来一定的困难
box-sizing可以改变盒模型
1.content-box：标准盒模型
2.border-box：width = content width + paddingLeft + borderLeft + paddingRight + borderRight

CSS3 背景

在CSS3之前我们对背景图片的控制极为有限，只能决定其来源、位置、重复，CSS3开辟了一篇新天地

background-size

在 CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片，以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度
1.length:设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
2.percentage: 以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
3.cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中
4.contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位
1.padding-box: 背景图像相对于内边距框来定位
2.border-box: 背景图像相对于边框盒来定位
3.content-box: 背景图像相对于内容框来定位
如果背景图像的 background-attachment 属性为fixed，则该属性没有效果

CSS3 渐变（Gradient）

CSS3渐变分为liner-gradient和radial-gradient

线性渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴
linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)
W3C标准线性渐性语法包括三个主要属性参数：

第一个参数指定了渐变的方向，同时决定了渐变颜色的停止位置。这个参数值可以省略，当省略不写的时候其取值为to bottom

在决定渐变的方向主要有两种方法：
1.angle：通过角度来确定渐变的方向。0度表示渐变方向从下向上，90度表示渐变方向从左向右。如果取值为下值，其角度按顺时针方向旋转
2.关键词：通过关键词来确定渐变的方向。比如to top、to right、to bottom和to left
这些关键词对应的角度值，除了使用to top、top left之外，还可以使用top left左上角到右下角、top right左上角到右下解等。

第二个和第三个参数，表示颜色的起始点和结束点。可以在插入多个颜色值

多色线性渐变

在实际中，渐变不仅仅是只有两种颜色，会有多色
.toLeft {
background-image:-webkit-linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
}

径向渐变

CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。
radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);

CSS3 过渡和动画

过渡

在CSS3引入transition之前css没有时间轴，所有的状态变化都是瞬间完成
div{
transition: 1s;
}

指定属性

我们还可以指定transition适用的属性，比如只适用于height
transition: 1s height;
这样一来，只有height的变化需要1秒实现，其他变化（主要是width）依然瞬间实现，在同一行transition语句中，可以分别指定多个属性

delay

但是，这样一来，height和width的变化是同时进行的，跟不指定它们没有差别，我们希望，让height先发生变化，等结束以后，再让width发生变化。实现这一点很容易，就是为width指定一个delay参数
transition: 1s height, 1s 1s width;
上面代码指定，width在1秒之后，再开始变化，也就是延迟（delay）1秒
delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果

animation

transition 比较简单，animation可以帮我们实现复杂的动画，使用animation我们首先需要定义动画过程，也就是关键帧
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）。如果有需要，完全可以插入更多状态，值是每个状态下的属性值
定义了关键帧之后就可以给DOM元素绑定动画了，和事件很像
div:hover {
animation: 1s rainbow;
}
当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒，默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放
animation: 1s rainbow infinite;
也可以指定动画具体播放的次数，比如3次
animation: 1s rainbow 3;

CSS3 变形

CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性，在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
transform ： none | <transform-function> [ <transform-function> ]*
transform中使用多个属性时却需要有空格隔开，可用于内联(inline)元素和块级(block)元素

旋转

可以通过rotate使元素旋转一定的度数
transform:rotate(30deg);
1.旋转是顺时针的
2.旋转之后元素仍占据原来位置，实际上所有的transform都是这样，缩放、位移等都不会改变元素占据的位置
3.元素旋转的的基点默认是中心，可以通过transform-origin属性改变

位移

可以通过translate使元素平移
transform:translate(x,y); transform:translate(200px,150px);

扭曲

可以通过skew使元素扭曲一定的度数，和上面一样也有三中类似的用法

transform:skew(10deg, 20deg);
transform:skewX(10deg);
transform:skewY(10deg);
transform:skew(10deg);

CSS3 3D

CSS3带来了DOM的3D效果，元素需要设置需要设置perspective来激活3D效果，可以通过两种方式实现
1.在transform属性中使用perspective方法
transform: perspective( 600px );
2.直接使用perspective属性
perspective: 600px;
perspective属性的值决定了3D效果的强烈程度，可以认为是观察者到页面的距离。值越大距离越远，视觉上的3D效果就会相应的减弱。perspective: 2000px; 会产生一个好像我们使用望远镜看远方物体的3D效果，perspective: 100px;会产生一个小昆虫看大象的效果。

作者：匿名用户404
链接：https://www.jianshu.com/p/4daa686149b8