常用CSS3属性整理
文本
🔑文本超出部分折叠
white-space:nowarp;
overflow:hidden;
text-overflow:ellipsis
word-warp
边界换行
- normal 默认
- break-word 内容将在边界内换行，仅用于块对象，内联对象要用的话，必须要设定height、width或display:block或position:absolute。
word-break:
处理单词折断
- normal 使用浏览器默认的换行规则。
- break-all 允许在单词内换行
- keep-all 只能在半角空格或连字符处换行
white-space
white-space 属性设置如何处理元素内的空白(空格)
- normal 默认。连续空白会被浏览器忽略
- pre 连续空白会被浏览器保留(保留原文本空白，换行符)
- 🔑nowrap 文本不会换行，直到遇到标签
- pre-wrap 保留原文本空白，但正常换行
- pre-line 合并连续空白，打算保留换行符
- inherit 继承自父元素
🔑text-shadow
文本阴影
text-shadow: x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)
可以写多个，,隔开
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
</br>
</br>
边框
border-radius
- 圆角半径值
border-radius:5px - 角收缩率
border-radius:50%//标准圆 - 按对角设置
border-radius:5px(主对角线) 25px(次对角线); - 逐一设置
border-radius:10px 20px 30px 40px(从左上起顺时针);
border-image
source
border-image-source:url(image url);
width
border-image-width: 1;
repeat
三种repeat方式
stretch 压缩或伸展border-image的背景图片以其刚好适应border-width的宽度
repeat 简单的重复
round 压缩或伸展border-image的背景图片以图片最小单元刚好适应border-width的宽度，在此基础上重复
outset
边框图像区域超出边框的量,值为border-image-width的倍数
边框图片设置生存器
http://border-image.com/
box
🔑box-shadow
box-shadow:inset x-offset y-offset blur-radius spread-radius color
-
阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值inset,就是将外阴影变成内阴影
-
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边
-
Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部
-
阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊
-
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小
阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样
box-sizing
box-sizing可以改变盒模型
- content-box：标准盒模型
width = content width - 🔑border-box：IE盒模型
width = content width + paddingLeft + borderLeft + paddingRight + borderRight
background
多背景
通过逗号间隔，图片偏移，可以设置多背景
background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
url("haorooms.jpg") 400px 201px no-repeat;
background-size
- length:设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
- percentage: 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
- contain 缩放背景图片以完全装入背景区，可能背景区部分空白。
- cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
background-origin
偏移参考对象
- padding-box
- border-box
- content-box
background-clip
规定背景的绘制区域
- padding-box
- border-box
- content-box
</br>
</br>
渐变
线性渐变
linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <percentage> | <length> ]//新颜色出现的位置
简单地可以概括为设置渐变轴位置，设置颜色及在轴上的位置
径向渐变
radial-gradient(
[ [ circle || <length> ] [ at <position> ]? , |
[ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , |
at <position> ,
]?
<color-stop> [ , <color-stop> ]+
)
where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
and <color-stop> = <color> [ <percentage> | <length> ]?
通过规定图形形状及其中心位置、颜色节点就可以完成一个基础的辐射。参数中，图形相关的参数按顺序以空格间隔，颜色节点用逗号间隔。
径向渐变生成器http://www.colorzilla.com/gradient-editor/
</br>
</br>
过渡与动画
过渡
<single-transition> = [ none | <single-transition-property> ] || <duration time> || <single-transition-timing-function> || <delay time>
<single-transition-property> = all | <custom-ident>
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( <integer> [, [ start | end ] ]? ) | cubic-bezier( <number>, <number>, <number>, <number> )
变化曲线
ease 激进到渐缓
linear 线性
ease-in 缓进到线性
ease-out 线性到缓出
step-start 等同于 steps(10,start) 动画分成10步，动画执行时为开始左侧端点的部分为开始。
step-end 等同于 steps(10,end) 动画分成10步，动画执行时以结尾端点为开始，默认值为 end。
ease-in-out 缓进到线性到缓出
cubic-bezier 自定义贝塞尔曲线
自定义贝塞尔曲线生成器 http://cubic-bezier.com/
动画
<single-animation>#
where
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
where
<single-timing-function> = <single-transition-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>
where
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( <integer> [, [ start | end ] ]? ) | cubic-bezier( <number>, <number>, <number>, <number> )
定义动画
@keyframs keyname{}
//设置关键帧
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
div{
animation: 1s keyname infinite;//时间 动画名 次数
}
animation-fill-mode
动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。
none：默认值，回到动画没开始时的状态
forwards：让动画停留在结束状态
backwards：让动画回到第一帧的状态
both: 根据animation-direction轮流应用forwards和backwards规则
animation-direction
动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性，可以改变这种行为
normal
alternate 循环往复
reverse 颠倒运动方向
alternate-reverse
变形及3D
transform
transform-origin
改变旋转中心
transform:translate()
平移
translateX()，translateY()可以改变特定轴
transform:scale()
缩放
scaleX()、scaleY()
transform:skew()
transform:skewX(10deg)、transform:skewY(10deg
倾斜
perspective
视距，越大3D效果越不明显
变形、动画工具：http://isux.tencent.com/css3/tools.html
perspective origin
焦点
