CSS3入门：掌握基础语法

text-shadow

text-shadow支持文字阴影功能，简单利用CSS3属性增加文字的质感而不须使用任何图片

语法： text-shadow: h-shadow v-shadow blur color;

h-shadow 必需。水平阴影的位置。允许负值。(正右负左)

v-shadow 必需。垂直阴影的位置。允许负值。(正下负上)

blur 可选。模糊的距离。

color 可选。阴影的颜色。

text-shadow: 3px 3px 3px #999999;

所有主流浏览器都支持 text-shadow 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。(IE最新的版本IE11)

/*text-shadow: 水平偏移量(正右负左) 垂直偏移量(正下负上) 阴影模糊半径 阴影颜色;*//*基本使用*/text-shadow: -10px -10px 1px orange;/*类似发光字*/text-shadow: 0 0 5px red;/*多重阴影*/text-shadow: 0 0 10px red,0 0 30px green,0 0 50px orange;/*取消阴影*/text-shadow: none;

background-image ：设置元素的背景图像。

CSS3支持多重背景图,只要加上一个url指定图片路径,并用逗号(,)将两组url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

background-size: 设置背景尺寸

background-size是CSS3新增的属性,以前的背景图无法重设大小,这个新属性能够让我们设置背景图的尺寸。

语法:

background-size: length|percentage|cover|contain;

background:60px 80px

cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

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

box-shadow

box-shadow语法是为图像制造影子，CSS3的box-shadow有点儿类似于text-shadow, 只不过box-shadow是给对象实现图层阴影效果。

语法： box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值。

v-shadow 必需。垂直阴影的位置。允许负值。

blur 可选。模糊距离。

spread 可选。阴影的尺寸。

color 可选。阴影的颜色。

inset 可选。将外部阴影 (outset) 改为内部阴影, 默认值: outset。

实例：

-moz-box-shadow: 10px 10px 15px 2px #666;-webkit-box-shadow: 10px 10px 15px 2px #666;-ms-box-shadow: 10px 10px 15px 2px #666;-o-box-shadow: 10px 10px 15px 2px #666;box-shadow: 10px 10px 15px 2px #666;

目前大部分浏览器新版的主流浏览器已支持box-shadow语法，但由于CSS3还在规划中、尚未定案，所以有些浏览器会使用自己的语法，

Firefox使用-moz-box-shadow, safari与chrome则使用-webkit-boxshadow。

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

/*box-shadow: 水平偏移量 垂直偏移量 阴影模糊半径 阴影拓展半径 颜色 投影方式(inset);*/box-shadow: -10px 50px 1px 10px green;box-shadow: -10px 50px 1px 10px green,5px -20px 5px 0px blue;

border-radius

border-radius就是给图像制造圆角。CSS2.0要做圆角，必须把图像切成小块，再用div将这些小块图像接回。

实例：

-moz-border-radius: 30px;-webkit-border-radius: 30px;-ms-border-radius: 30px;-o-border-radius: 30px;border-radius: 30px;

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。(IE9已支持)

border-radius:50% 圆形

/*左上角开始顺时针旋转： 水平弯曲程度/垂直弯曲程度*/border-radius: 100px 20px 30px 40px/50px 60px 70px 80px;border-radius: 10px 30px 50px 70px;/*上右下左*/border-radius: 50px/100px;/*水平都是50px 垂直都是100px*/border-radius: 50px;

border-image花样边框

border-image可以做出页面花边的效果,语法如下

border-image:source slice width repeat;

source:指定图片路径(必填)

slice: 切出图片使用的边框线(必填)

width: 图片的宽度(可省略)

repeat: 图片填充方式(可省略),设置值有stretch、repeat和round

stretch: 把图片拉伸到整个边框区域

repeat：重复填充

round：重复填充并自动调整图片大小

border-image是CSS3的新增功能,目前IE和Firefox不支持,不推荐使用

border-collapse

为表格设置合并边框模型：

table,td{    border-collapse:collapse; //边框重叠}

separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

collapse 如果可能, 边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit 规定应该从父元素继承 border-collapse 属性的值。

opacity

设置 div 元素的不透明级别：

div{    opacity:0.5; /* 取值范围0-1 */}div{    opacity:0.5;    filter:Alpha(opacity=10); //IE8早期版本 取值范围1-100}

text-overflow 属性规定当文本溢出包含元素时发生的事情。

clip 修剪文本。

ellipsis 显示省略符号来代表被修剪的文本。

string 使用给定的字符串来代表被修剪的文本。

div.test{    text-overflow:ellipsis;}

实例: 在标题栏中如何实现, 当标题文本超长时，就会自动截断：

这三条语句组合使用, 就可以对单行超长文本做截断, 并且在截断的地方自动补充省略号。

div.test{    overflow: hidden;    white-space: nowrap; /* 不换行 */    text-overflow: ellipsis;" /* 显示省略符号来代表被修剪的文本。 */}