css怎么测试效果

css测试效果，浏览器就是css最好的测试地方，在浏览器中，我们可以看到css的显示效果，firefox中还有一个firebug的插件，这个东西很方便我们对css做作用做比较好的侦测，如图：

不行 因为层的位置不同 用css做的飘动的 只能 在字的背面 而不能 覆盖字

如果需要css的话 这个

body{background:url(地址) repeat}

是飘动的带球衣、雪花的透明图

这个代码生成的飘动的 遇到文字会被挡住

css是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

资料扩展：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，只需要在样式列表中找到相应的样式声明进行修改。

多页面应用CSS样式表可以单独存放在一个CSS文件中，这样就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

CSS3高级属性可分为：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。

CSS边框和圆角

transform：可以旋转、缩放、倾斜、平移的元素；

border-radius：圆角；

单独分离：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

左上角，右上角，右下角，左下角。

第一个值：左上角, 第二个值：右上角、左下角，第三个值：右下角

第一个值：左上角、右下角，第二个值：右上角、左下角

四个圆角值相同

box-shadow：阴影；

投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色

border-image:边框；

background-image：多个路径；

background-size：设置大小

background-position：为多个路径设定位置；

background-repeat：为多个路径设置显示是否重复；

background-origin：指定图像的区域

background-clip:指定位置开始绘制。 注意：背景颜色只能设置一个

background:路径 显示位置 是否重复，路径 显示位置 是否重复··········

CSS渐变色

css有两种类型的渐变：线性渐变和径向渐变

线性渐变：创建一个线性渐变，至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

background：linear-gradient(颜色···········) 默认从上到下·

background：linear-gradient(to right,颜色···········) 从左到右·

background：linear-gradient(to left,颜色···········) 从右到左·

background：linear-gradient(to top left ,颜色···········) 从右下到左上·

也可以按照角度来渐变

background: linear-gradient(0deg, red, blue);

重复的线性渐变：background: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变：至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，也可以指定渐变的中心、形状、大小。默认渐变的中心是 center，渐变的形状是 ellipse（椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

background: radial-gradient(位置,[形状], 颜色 百分比··················);

CSS文本效果

文本属性：

text-shadow：偏移量 向下大小 模糊度 颜色

box-shadow：使用于盒子阴影

word-wrap：break-word换行

word-break：单词拆分换行属性指定换行

white-space:处理元素中的空白