sialvsic的Tech空间

# CSS3 基础

# CSS3 边框

圆角边框 border-radius

边框阴影 box-shadow box-shadow: 常用的属性详解

  box-shadow:  10px 10px 5px #112233

距左上顶点 10px(left) 10px(top) 5px 模糊距离 #112233阴影颜色 边框照片 border-image(简写属性)

# CSS3 背景

设置背景图的宽高 background-size

  background-size: 100px 200px

设置背景的定位区域 background-origin

  • content-box
  • padding-box
  • border-box

其他 CSS3允许为背景设置两张图

  background-image:url(bg_flower.gif),url(bg_flower_2.gif);

# CSS3 文本效果

文本阴影 text-shadow 和box-shadow相似的用法

几个常见属性的对比

  • text-wrap 规定文本的换行规则 基本主流浏览器不支持【放弃】
  • word-break 属性规定自动换行的处理方法
  • word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

使用以下两个取决于是希望一个长单词的显示是完全在下一行全部显示，还是折行显示 word-break

  • normal 使用浏览器默认的换行规则
  • break-all 允许在单词内换行
  • keep-all 只能在半角空格或连字符处换行

word-wrap

  • normal 只在允许的断字点换行（浏览器保持默认处理）
  • break-word 在长单词或 URL 地址内部进行换行

# CSS3 2D转换 Transform

设置旋转元素的基点位置 transform-origin 默认值为 50% 50% 0(Z 轴) 距左上顶点left 50% top 50%

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸

  • translate() 平移
  • rotate() 旋转
  • scale() 缩放
  • skew() 倾斜
  • matrix() 矩阵

translate() 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */
}

值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

translate(x,y) 或 translate(x) 或 translate(y)

rotate() 通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */
-o-transform: rotate(30deg);		/* Opera */
-moz-transform: rotate(30deg);		/* Firefox */
}

值 rotate(30deg) 把元素顺时针旋转 30 度。 rotate(x)

scale() 通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

div
{
  transform: scale(2,4);
  -ms-transform: scale(2,4);	/* IE 9 */
  -webkit-transform: scale(2,4);	/* Safari 和 Chrome */
  -o-transform: scale(2,4);	/* Opera */
  -moz-transform: scale(2,4);	/* Firefox */
}

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。 scale(x,y) 或 scale(x) 或 scale(y)

skew() 通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);	/* IE 9 */
-webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */
-o-transform: skew(30deg,20deg);	/* Opera */
-moz-transform: skew(30deg,20deg);	/* Firefox */
}

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。 skew(x,y) 或 skew(x) 或 skew(y)

matrix() matrix() 方法把所有 2D 转换方法组合在一起。 matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。 六个值的意义

matrix(a,b,c,d,e,f)
  • a 缩放X
  • b
  • c
  • d
  • e 缩放Y
  • f 代表平移X
  • g 代表平移Y

详细理解：参考理解CSS3 transform中的Matrix(矩阵) (opens new window)

# CSS3 3D转换 Transform

matrix 矩阵 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。

translate 平移 translate3d(x,y,z) 定义 3D 转化。 translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。 translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。 translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。

scale 缩放 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。 scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。 scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。

rotate 旋转 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿 X 轴的 3D 旋转。 rotateY(angle) 定义沿 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

详细参考：好吧，CSS3 3D transform变换，不过如此！ (opens new window)

# CSS3 过渡 Transition

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容：

  • 规定您希望把效果添加到哪个 CSS 属性上
  • 规定效果的时长
div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

transition 是一个简写属性，可以包括四个值

  • transition-property 规定应用过渡的 CSS 属性的名称 此属性可以为all、
  • transition-duration 定义过渡效果花费的时间。默认是 0
  • transition-timing-function 规定过渡效果类型。默认是 "ease" 有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
  • transition-delay 规定过渡效果延迟多久开始

可以简写为：

  transition: width 1s linear 2s;

过渡效果的一般使用场景：

# CSS3 动画 Animation

动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。 为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器

@keyframes 规则 keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。 通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

  • 规定动画的名称
  • 规定动画的时长

eg:

1.创建动画
@(Css)keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}


2.绑定动画
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

animation 简写属性，包括六个值

  animation: myfirst 5s linear 2s infinite alternate;
  //  动画名称  动画一个周期5s 速度曲线为linear 动画无限期执行 轮流逆向播放

属性 描述 CSS

  • @keyframes 规定动画。
  • animation 所有动画属性的简写属性，除了 animation-play-state 属性
  • animation-name 规定 @keyframes 动画的名称
  • animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0
  • animation-timing-function 规定动画的速度曲线。默认是 "ease"
  • animation-delay 规定动画何时开始。默认是 0
  • animation-iteration-count 规定动画被播放的次数。默认是 1 仅执行一次
  • animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"
  • animation-play-state 规定动画是否正在运行或暂停。默认是 "running"
  • animation-fill-mode 规定对象动画时间之外的状态

# CSS3 渐变 Gradients

渐变有两个属性

  • Liner gradients 线性渐变
  • radial gradients 半径渐变
  background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - Top to Bottom (this is default) 默认的方向是从上倒下的

  background: linear-gradient(angle, color-stop1, color-stop2);

注意：设置角度的为0deg时，为下到上，之后按照顺时针的角度旋转

渐变可以设置多种颜色的渐变

  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

Radial Gradients 也是基本相同的 默认的形状(shape)是椭圆，位置(position)是中心，尺寸(size)是farthest-corner

background: radial-gradient(shape size at position, start-color, ..., last-color);

参考：http://www.w3schools.com/css/css3_gradients.asp

# CSS3 其他属性

# box-sizing

box-sizing:

  • content-box 仅包含内容的宽和高； 【padding，border，margin并不在其中】
  • border-box 包含内容，padding和border； 【margin并不在其中】

← CSS 对齐 →

陕ICP备20004732号-3