css3 background(csstransform属性)
很多朋友对于css3 background和csstransform属性不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
Css3——background属性详解
background：背景。在css里面作为css属性一成员，通过该属性可设置背景图片、背景颜色、背景图片截取等样式。而仅仅一个background又具有多个子属性。
颜色名称，如： background-color:red;
十六进制背景色，如： background-color:#f00;;
rgb颜色，这里如果是rgba，a表示透明程度，为0全透明，为1为完全不透明，
如： background-color:rgb(255,0,0.3);;
特殊值：transparent，透明色： background-color:transparent;
background-image属性用于为一个元素设置一个或多个背景图片，多个背景图片之间以逗号隔开。
一张图片： background-image: url(img/a.jpg);
多张图片： background-image: url(img/a.jpg),url(img/b.jpg);
特殊值：none，不显示背景图像
background-image: none;
background-repeat属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
常用的4个值：
repeat：水平和垂直方向都重复图像， background-repeat: repeat;
repeat-x：水平方向重复图像
repeat-y：垂直方向重复图像
no-repeat：图像不重复
规定背景图像是否固定或者随着页面的其余部分滚动。
scroll：背景图像相对于页面不动，会随着网页的滚动而移动，默认
fixed：背景图像相对于浏览器窗口不动，内容滚动的时候背景图像不动
background-attachment: fixed;
第一个值为横坐标，第二个值为纵坐标。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。
例如： background-position: right；代表背景图右侧，垂直方向居中的位置。
百分比位置，如：background-position: 20% 20%;
具体像素位置，如：background-position: 20px 20px;
background-size设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
单张图片的背景大小可以使用以下三种方法中的一种来规定：
当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:
每个值可以是<length>,是<percentage>,或者 [auto]。
示例：
为了设定超过一张以上的图片尺寸时，需要提供多项数值，它们通过逗号分隔。
CSS部分背景图片分辨率为427*640
分别给box的background-size属性添加不同的属性值，会产生不同的效果。
1、长度：可以用px、em、rem等指定背景图片大小，不能为负值。
background-clip裁剪，通常和background-origin一起使用，决定设置元素的背景（背景图片或颜色）是否显示。
注：background-clip只是将背景和背景色粗暴的裁剪。
该属性有四个值
border-box
背景延伸至边框外沿（但是在边框下层）。 background-origin: border-box;
background-origin规定了指定背景图片[ background-image ]属性的原点位置的背景相对区域.
border-box
背景图片的摆放以border区域为参考
padding-box
背景图片的摆放以padding区域为参考
content-box
背景图片的摆放以content区域为参考
样式：
先看一下background-origin属性。
先看一下background-clip属性。
这就印证了background-clip只是将背景和背景色粗暴的裁剪。
好的，以上就是我对background的各个属性的理解，实际应用时可能会有部分出入，我们只需要掌握background-color、background-image、background-repeat、background-position、background-size这几个常用的属性即可。
欢迎大家一起交流，讨论。
css3有哪些新特性 包含哪些模块
1、CSS3圆角表格圆角表格，对应属性：border-radius。
2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。
3、丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。
4、在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。
边框（Borders）
border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果
border-image:控制边框图象 CSS3边框border-corner-image:控制边框边角的图象
border-radius:能产生类似圆角矩形的效果
背景（Backgrounds）
background-origin:决定了背景在盒模型中的初始位置，提供了3个值，border, padding和content
border:控制背景起始于左上角的边框
padding:控制背景起始于左上角的留白
content:控制背景起始于左上角的内容 CSS3背景background-clip:决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding
border:会覆盖住背景
padding:不会覆盖背景
background-size:可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定
multiple backgrounds:多重背景图象，可以把不同背景图象只放到一个块元素里。
文字效果（Text effects）
text-shadow:文字投影，可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。
text-overflow:当文字溢出时，用“…”提示。包 CSS3文字效果括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。
颜色（Color）
HSL colors:除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如hsl（0,100%, 50%）
HSLA colors:加了个不透明度（Apacity），用0到1之间的数来表示，比如hsla（0,100%,50%,0.2）
opacity:直接控制不透明度，用0到1之间的数来表示
RGBA colors:和HSLA colors类似，加了个不透明度。一直以来，浏览器的透明一直无法实现单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。换句话说，很难实现背景颜色透明而文字不透明的效果。直到RGBA颜色的出现这一切将成为现实。
实现这样的效果非常简单，设置颜色的时候我们使用标准的rgba（）单位即可，例如rgba（255,0,0,0.4）这样就出现了一个红色同时拥有alpha透明为0.4的颜色。
经过测试firefox3.0、safari3.2、opera10都支持了rgba单位。
用户界面（User-interface）
resize:可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局
选择器（Selectors）
CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如:nth-child()等。
Attribute selectors:在属性中可以加入通配符，包括^,$,*
[att^=val]:表示开始字符是val的att属性 CSS3选择器[att$=val]:表示结束字符是val的att属性
[att*=val]:表示包含至少有一个val的att属性
其它模块：
（Other modules）
media queries:感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。
multi-column layout:多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值
column-width:指定每列宽度
column-count:指定列数
column-gap:指定每列之间的间距
column-rule-color:控制列间的颜色
column-rule-style:控制列间的样式
column-rule-width:控制列间的宽度
column-space-distribution:平均分配列间距
css3新特性有哪些
一、RGBA和透明度
RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha通道，即除了红绿蓝三种颜色外还增加一个代表透明度的通道，其中 RGB值分别表示红色、绿色、蓝色，而 alpha取值则为 0到 1（小数位一位）。
二、background属性
background-image：设置元素的背景图像。
background-origin：规定背景图片的定位区域。
background-size：规定背景图片的尺寸。
background-repeat：设置是否及如何重复背景图像。
三、word-wrap属性
word-wrap属性允许长单词或 URL地址换行到下一行。
注：所有主流浏览器都支持 word-wrap属性。
基础语法：
word-wrap: normal|break-word;
四、text-shadow属性
text-shadow属性：向文本设置阴影。
text-shadow基础语法：
text-shadow： 5px 5px 5px#FF0000;
参数分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；
五、font-face属性
font-face属性：定义自己的字体
在新的@font-face规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
六、border-radius属性
border-radius属性：是一个简写属性，用于设置四个 border-*-radius属性。
基础语法：
border-radius: 1-4 length|%/ 1-4 length|%;
注：该属性允许您为元素添加圆角边框！
七、border-image属性
border-image：将图片规定为包围 div元素的边框
border-image基础语法：
border-image: url(border.png) 30 30 round
八、box-shadow属性
box-shadow属性：向框添加一个或多个阴影。（盒阴影）
box-shadow基础语法：
box-shadow: 10px 10px 5px#888888
九、媒体查询
媒体查询定义两套css，当浏览器的尺寸变化时会采用不同的属性。
好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！