常用CSS3属性整理

常用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> ]{} ]  [ 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

焦点

来源：https://www.jianshu.com/p/72d100146c9c