初始化样式表及CSS3新增样式

----reset 重置性样式表

original author : Eric Meyer https://meyerweb.com/

----normalize 标准性样式表

original author : Nicolas Gallagher https://github.com/necolas/normalize.css/wiki

----CSS3新增样式

--border-radius 圆角属性

给元素添加圆角边框 border-radius: top-left top-right bottom-right bottom-left 按顺时针顺序

1.border-radius设置4个值 则按左上-右上-右下-左下的顺序

2.border-radius设置3个值 则左上-右上|左下-右下

3.border-radius设置2个值 则左上角|右下角-右上角|左下角

4.border-radius设置1个值 则4个圆角值相同

--border-image 边框图片

border-image: source slice width outset repeat|initial|inherit

图像路径 图像边界向内偏移量 图像边界宽度 

--box-shadow 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset

x偏移量 y偏移量 模糊半径 扩展半径 阴影颜色 阴影模式(内/外)

例如 box-shadow: 0 0 4px 4px #ccc inset

--CSS3 渐变 gradients

线性渐变 linear-gradients 从一个方向到另一个方向的渐变 水平 垂直 斜线 渐变

background-color: linear-gradient(red, yellow) 从上到下

background-color: linear-gradient(to right, red, yellow) 从左到右

background-color: linear-gradient(to bottom right, red, yellow) 从左上到右下

颜色可以设置多种颜色 英文颜色 十六进制颜色 rgb rgba

径向渐变 radial-gradients

background-color: radial-gradient(red, yellow, blue) 从圆心向外

background-color: radial-gradient(red 5%, yellow 15%, green 60%)

--transform 2d变换 无法作用于行内元素

容许元素在2d平面上进行变换 包括平移translate、旋转rotate、缩放scale、倾斜skew等

translate平移  transform: translate(x, y) x距左边距离 y距上边距离

rotate旋转 transform: rotate(30deg) 旋转角度

scale缩放 transform: scale(x, y) 宽高缩小或者放大的倍数 大于1时放大 小于1时缩小

skew倾斜 transform: skew(30deg, 20deg) x轴和y轴倾斜的角度

--transition 过渡

transition: property duration timing-function delay

property过渡的属性名称(width left) | duration过渡需要的时间(s ms)| timing-function过渡速度曲线 | delay延时时长

timing-function包括 linear线性 | ease慢速开始变快慢速结束 | ease-in慢速开始 | ease-out慢速结束 | ease-in-out慢速开始和结束 | cubic-bezier(n,n,n,n)贝兹曲线

--帧动画 animation @keyframes

@keyframes 关键帧

例如 @keyframes myAnimation {

    0% { width: 100px; }

    40% { width: 400px; }

    100% { width: 100px; }

}  可添加多个百分比

animation 播放动画

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

animation-name 动画名称 例如上面的myAnimation

animation-duration 动画持续时间

animation-timing-function 动画播放速度曲线

animation-delay 动画开始时间

animation-iteration-count 动画循环次数 默认为1  infinite为无限次循环

animation-direction 动画播放方向 normal 正向 alternate表示动画偶数次正向播放奇数次反向播放

animation-play-state 动画的播放状态 running播放 paused停止播放  该属性不能复合书写 只能单例设置

----CSS 文本补充

--css2

color 颜色 | direction 文本方向 ltr rtl | letter-spacing 字符间距 px | line-height 行高 | text-align 文本对齐方式 left center right | text-decoration 文本装饰 none underline overline line-through | text-indent 首行缩进 em px | text-transform 控制元素中的字母 | vertical-align 垂直对齐方式 | white-space 空白处理方式 normal pre nowrap pre-wrap pre-line | word-spacing 字间距 em px

--css3

text-align-last 最后一行对齐 left right justify center | text-overflow 文本溢出 clip剪裁 ellipsis省略号 | text-shadow 文本添加阴影 h-shadow v-shadow blur color | word-break 非中日韩文本的换行 | word-wrap 长单词分割换行

单行文本展示省略号

{ width: 200px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }