CSS3新增
CSS3 是最新的 CSS 标准。css3 向下兼容css2 ,可以理解成为了满足网页的日渐提升的功能性与设计美学而新增的css样式，利用css3 我们可以通过更少的代码实现更好的表现，很大程度上节省了JavaScript引擎的开销。
border-radius 圆角属性
border-radius: 1-4 length|% / 1-4 length|%;
/* xy合并参数写法 */
border-radius: 10px 20px 30px 40px;
border-radius: top-left top-right bottom-right bottom-left
/* 全参数写法 */
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y复合与单例写法对比
border-radius:2em;
/*对应单例写法为*/
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 2em 1em 4em / 0.5em 3em;
/*对应单例写法为*/
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
1-4个值所对应
-
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
-
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
-
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
-
一个值： 四个圆角值相同
x 方向 % 对应容器宽度
y方向 % 对应容器高度
| 描述 | 值 |
|---|---|
| 定义弧线半径 | length |
| 使用%定义角落的形状。 | % |
border-image 边框图片
border-image: source slice width outset repeat|initial|inherit;
border-image: url(border.png) 30 round;| 值 | 描述 |
|---|---|
| border-image-source | 用于指定要用于绘制边框的图像的位置 路径 |
| border-image-slice | 图像边界向内偏移 |
| border-image-width | 图像边界的宽度 |
| border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
| border-image-repeat | 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。 |
border-shadow 盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x偏移量 y偏移量 模糊半径 扩展半径 阴影颜色 阴影模式(内/外)
box-shadow: 10px 10px 20px 25px #ccc inset;boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0
| 值 | 参数 | 描述 |
|---|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 | 阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 | 阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部 |
| blur | 可选。模糊距离 | 此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊 |
| spread | 可选。阴影的大小 | 此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小 |
| color | 可选。阴影的颜色。rgba hex rgb | 此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 | 此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影 |
CSS3 渐变（Gradients）
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
-
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
-
径向渐变（Radial Gradients）- 由它们的中心定义
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: radial-gradient(shape size at position, start-color, ..., last-color);线性渐变
从一个方向到另一个方向的 水平 垂直 斜线 渐变
线性渐变 - 从上到下（默认情况下）
background-image: linear-gradient(#e66465, #9198e5);线性渐变 - 从左到右
background-image: linear-gradient(to right, red , yellow);线性渐变-左上到右下
background-image: linear-gradient(to bottom right, red, yellow);任意角度
background-image: linear-gradient(angle, color-stop1, color-stop2);
background-image: linear-gradient(-90deg, red, yellow);多种颜色
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 使用透明度 transparent
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));重复线性渐变
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);径向渐变
中心向外成圆形扩散渐变
background-image: radial-gradient(shape, size at position, start-color, ..., last-color);
shape 形状 circle(圆形) 或 ellipse(椭圆形) 默认值为 ellipse 椭圆普通模式
background-image: radial-gradient(red, yellow, green);分配比例
background-image: radial-gradient(red 5%, yellow 15%, green 60%);设置形状
background-image: radial-gradient(circle, red, yellow, green);
默认为椭圆 ellipse重复渐变
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);CSS3 transform 2D变幻
注意 transform无法作用于 行内元素
容许元素在2D平面上进行变幻 包括 平移(translate) 旋转(rotate) 缩放(scale) 倾斜(skew)
transform: translate(20px,30px) rotate(30deg) scale(3,4) skew(20deg,30deg);
transform-origin: x-axis y-axis z-axis;translate 平移
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
transform: translate(50px,100px);rotate 旋转
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform: rotate(30deg);scale 缩放
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
transform: scale(2,3);skew 倾斜
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
transform: skew(30deg,20deg);CSS3 transition 过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript
transition: property duration timing-function delay;
property 过渡的属性名称 width left 等数值型或 color颜色
duration 过渡需要的时间 s ms
timing-function 过渡速度曲线
delay 延时时长 m mstiming-function 曲线属性
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
.case {
width: 100px;
height: 20px;
background-color: red;
transition: .5s ease 1s;
}
.case:hover {
width: 300px;
height: 100px;
background-color: blue;
}CSS3 帧动画 amimation @keyframes
在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。
animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的
@keyframes 关键帧
通过@keyframes设置自定义名称的动画关键帧 在动画关键节点设置数值
- animationName：动画名称，开发人员自己命名；
- percentage：为百分比值，可以添加多个百分比值；
- properties：样式属性名称，例如：color、left、width等等。
@keyframes animationName {
from {
properties: value;
}
percentage {
properties: value;
}
to {
properties: value;
}
}
//or
@keyframes animationName {
0% {
properties: value;
}
percentage {
properties: value;
}
100% {
properties: value;
}
}animation 播放动画
animation-name
它是用来设置动画的名称，可以同时赋值多个动画名称，用,隔开：
.selector {
animation-name: none | IDENT[,none | IDENT]*;
}animation-duration
它是用来设置动画的持续时间，单位为s，默认值为0：
.selector {
animation-duration: <time>[,<time>]*;
}animation-timing-function
和transition-timing-function类似：
.selector {
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>);
} animation-delay
它是来设置动画的开始时间，单位是s或者ms，默认值为0：
.selector {
animation-delay: <time>[,<time>]*;
}animation-iteration-count
它是来设置动画循环的次数，默认为1，infinite为无限次数的循环：
.selector {
animation-iteration-count: number | infinite
}animation-direction
它是来设置动画播放的方向，默认值为normal表示向前播放，alternate代表动画播放在第偶数次向前播放，第奇数次向反方向播放
.selector {
animation-direction: normal | alternate [, normal | alternate]*;
}animation-play-state
它主要是来控制动画的播放状态：running代表播放，而paused代表停止播放，running为默认值：
PS: animation-play-state 无法通过animation复合书写 只能单例设置 与 transform-origin 一样
.selector {
animation-play-state:running | paused [, running | paused]*;
}animation 复合写法
它是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction的简写
.selector {
animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;
}
.selector {
animation: move
}CSS 文本补充
css2
| 属性 | 描述 | 属性值 |
|---|---|---|
| color | 设置文本颜色 | rgb HEX rgba |
| direction | 设置文本方向。 | ltr(左->右) rtl(右->左) |
| letter-spacing | 设置字符间距 | px |
| line-height | 设置行高 | px |
| text-align | 对齐元素中的文本 | left center right justify (两端对齐) |
| text-decoration | 向文本添加修饰 text-decoration: underline wavy red; 红色波浪下划线 wavy 波浪线 | none (默认 无效果) underline (下划线) overline(上划线) line-through ( 删除线) |
| text-indent | 缩进元素中文本的首行 | em px |
| text-transform | 控制元素中的字母 | capitalize 每个单词首字母大写 uppercase 全部大写 lowercase 全部小写 |
| vertical-align | 设置元素的垂直对齐 | baseline 基线 默认 middle 中线 super 文本上标 sub 文本下标 top 顶端对齐最高元素顶端 text-top 元素顶端与父元素字体顶端 bottom 底端与最低元素底端 text-bottom 底端与父元素字体底端 |
| white-space | 设置元素中空白的处理方式(主要控制换行) | normal 默认 忽略空白 pre 保留空白 nowrap 文本不换行 pre-wrap 保留空白 正常换行 pre-line 合并空白 保留换行符 |
| word-spacing | 设置字间距 | px em |
css3
| 属性 | 描述 | 属性值 |
|---|---|---|
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | left right justify center |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 | clip 剪裁 ellipsis 省略号 |
| text-shadow | 向文本添加阴影。text-shadow: h-shadow v-shadow blur color; | h-shadow 水平偏移 v-shadow 垂直偏移 blur 阴影模糊值 color 颜色 |
| word-break | 规定非中日韩文本的换行规则。 | break-all 单词内换行 keep-all 只能在半角空格或连字符处换行 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | normal 单词内不换行 break-word 单词内可换行 |
单行文本展示省略号
.text {
width: 200px;
text-overflow: ellipsis; /*超出部分省略号*/
overflow: hidden; /*内容超出宽度隐藏*/
white-space: nowrap; /*文本不换行显示*/
}溢出的文字隐藏
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;多行文本超出隐藏
display: -webkit-box; /* -webkit-inline-box; 行内元素*/
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 控制在第几行的结尾进行显示 ...*/
overflow: hidden;
/*高度 宽度必须规定好 不然...之后一行 也会展示出来*/white-space:自动换行
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
text-overflow 文字溢出
| 值 | 描述 |
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |
text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
clip : 不显示省略标记（...），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（...）
注意一定要首先强制一行内显示，再次和overflow属性 搭配使用
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
