css3易混淆属性详解

1.background,  background-color,   color

 （1）background：在一个声明中设置所有属性：

　　如：background: #00FF00 url(bgimage.gif) no-repeat fixed top;

 　　可用的属性有：

　　①background-color: 背景颜色：

　　可能有的值：-1-:  color_name,

　　　　　　　　-2-:  hex_number,

　　　　　　　　-3-:  rgb_number,

　　　　　　　　-4-:  transparent透明,

　　　　　　　　-5-:  inherit

　   ②background-position: 背景图像的位置：

　　可能有的值：-1-:  top left,top center,top right,center left,center center,center right,bottom left,bottom center,bottom right

　　　　　　　　-2-:  x% y% (如：10%,10%)

　　　　　　　　-3-:  xpos ypos (如：10px,10px)

　   ③background-size: 背景图像的尺寸：

　　可能有的值：-1-:  length (如：10px 20px  如果只设置一个值，则第二个值会被设置成auto)

　　　　　　　　-2-:  percentage (如：10%,10%)

　　　　　　　　-3-:  cover 把图像扩展至足够大，已使背景图像完全覆盖背景区域。

　　　　　　　　-4-:  contain　把图像扩展至最大尺寸，使其高度和宽度完全适应内容区域。

　   ④background-repeat: 如何重复背景图片：

　　可能有的值：-1-:  repeat

　　　　　　　　-2-:  repeat-x (如：10%,10%)

　　　　　　　　-3-:  repeat-y

　　　　　　　　-4-:  no-repeat  背景图只显示一次

　　　　　　　　-5-:  inherit

　   ⑤background-origin: 规定 background-position 属性相对于什么位置来定位：

　　可能有的值：-1-:  padding-box 背景图像相对于内边距框来定位。

　　　　　　　　-2-:  border-box 背景图像相对于边框盒来定位。

　　　　　　　　-3-:  content-box 背景图像相对于内容框来定位。

　   ⑥background-clip: 规定背景的绘制区域：

　　可能有的值：-1-:  border-box 背景被裁剪到边框盒。

　　　　　　　　-2-:  padding-box 背景被裁剪到内边距框。

　　　　　　　　-3-:  content-box 背景被裁剪到内容框。

　   ⑦background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动：

　　可能有的值：-1-:  scroll 默认值。背景图像会随着页面其余部分的滚动而移动。

　　　　　　　　-2-:  fixed 当页面的其余部分滚动时，背景图像不会移动。

　　　　　　　　-3-:  inherit 

　   ⑧background-image: 要使用的背景图像：

 

 

 （2）background-color：前面介绍了。。。。

 （3）color：字体颜色

 

2.transition, transform, translate

（1）transition：规定了四个过渡属性：

　　①transition-property: 规定设置过渡效果的 CSS 属性的名称。

　　②transition-duration: 规定完成过渡效果需要多少秒或毫秒。

　　③transition-timing-function: 规定速度效果的速度曲线。

　　④transition-delay: 定义过渡效果何时开始。

（2）transform：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜:

　　transform: none|transform-functions; 值描述测试none定义不进行转换。测试matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。测试matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y)定义 2D 转换。测试translate3d(x,y,z)定义 3D 转换。 translateX(x)定义转换，只是用 X 轴的值。测试translateY(y)定义转换，只是用 Y 轴的值。测试translateZ(z)定义 3D 转换，只是用 Z 轴的值。 scale(x,y)定义 2D 缩放转换。测试scale3d(x,y,z)定义 3D 缩放转换。 scaleX(x)通过设置 X 轴的值来定义缩放转换。测试scaleY(y)通过设置 Y 轴的值来定义缩放转换。测试scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。 rotate(angle)定义 2D 旋转，在参数中规定角度。测试rotate3d(x,y,z,angle)定义 3D 旋转。 rotateX(angle)定义沿着 X 轴的 3D 旋转。测试rotateY(angle)定义沿着 Y 轴的 3D 旋转。测试rotateZ(angle)定义沿着 Z 轴的 3D 旋转。测试skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。测试skewX(angle)定义沿着 X 轴的 2D 倾斜转换。测试skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。测试perspective(n)为 3D 转换元素定义透视视图。测试

 

（3）translate：各个方向位移，详细属性如上表:

 

转载于:https://www.cnblogs.com/xinxingyu/p/4744479.html

相关资源：数据结构—成绩单生成器