1、文本效果
文本阴影
CSS3 提供了 text-shadow 文本阴影效果，这个属性在之前讲过，只是没有涉及浏览器支持情况。
text-shadow：
| Opera | Firefox | Chrome | IE | Safari |
|---|---|---|---|---|
| 9.5+ | 3.5+ | 4+ | 10+ | 3.1+ |
这里有几个注意点：
- text-shadow 在 CSS2 的时候出现过，但各大浏览器碍于消耗大量的资源，迟迟未支持，然后在 CSS2.1 中剔除了。现在，CSS3 已经全面支持了；
- 最低支持版本上，不同手册和教材上都不太相同，但版本年代久远，无伤大雅。最准确的可以查询这个 站：http://caniuse.com。最需要注意的只有 IE10 才支持，IE9 不支持的；
- 目前的浏览器不需要给这个属性加上任何前缀，具体查询前缀版本可以访问刚才提供的地址。
文本裁剪
CSS3 提供了 text-overflow 属性来控制文本的溢出部分，它的作用是对溢出的部分裁剪掉，然后判定是否添加省略 。首先我们先看下样式表的属性，如下：
| 属性值 | 说明 |
|---|---|
| clip | 默认值，裁剪文本时不添加“…”省略 |
| ellipsis | 裁剪文本时添加“…”省略 |
对于 text-overflow 的支持度，是根据它的属性值来判定的，不同的属性值浏览器支持度不同。
| 属性值 | Opera | Firefox | Chrome | IE | Safari |
|---|---|---|---|---|---|
| clip | 9.63+ | 2.0+ | 1.0+ | 6.0+ | 3.1+ |
| ellipsis | 10.5+ | 6.0+ | 1.0+ | 6.0+ | 3.1+ |
而在 Opera 主流版本中，引擎已经靠拢 webkit，则不需要-o-了。目前来说，也不需要兼容-o-了。
文本描边
CSS3 提供了描边属性，即 text-stroke、text-stroke-width、text-stroke-color。目前只有 webkit 引擎的浏览器支持，并且必须加上-webkit-前缀才能有效。
| 属性 | Opera | Firefox | Chrome | IE | Safari |
|---|---|---|---|---|---|
| text-stroke 系列 | 15.0+ | 不支持 | 4.0+ | 不支持 | 3.1+ |
文本填充
CSS3 提供了一个文本颜色填充功能：text-fill-color，感觉和 color 属性很像。其实再配合其他属性才能达到不一样的效果。
| 属性 | Opera | Firefox | Chrome | IE | Safari |
|---|---|---|---|---|---|
| text-fill-color | 15.0+ | 不支持 | 4.0+ | 不支持 | 3.1+ |
2、渐变效果
CSS3 背景渐变功能，主要有两种渐变方式：线性渐变和径向（放射性）渐变。
线性渐变
CSS3 提供了 linear-gradient 属性实现背景颜色的渐变功能。在以前，这种效果必须采用图片才能实现的。首先，我们先看一下它的样式表，如下：
| 参数 | 值 |
|---|---|
| 方位 | 可选参数，渐变的方位。可以使用的值有：to top、to top right、to right、to bottom、to bottom left、to left、to top left |
| 起始色 | 必选参数，颜色值 |
| 末尾色 | 必选参数，颜色值 |
通过 top、left、right、bottom 这四组实现的渐变方向有时比较单一，我们可以使用以角度单位的数值来设置方位。比如 0 度（0deg）相当于 to top；角度会沿逆时针方向随着你的角度的增加而增加。
默认情况下：起始颜色的百分比位置是 0%，末尾颜色的百分比位置是 100%，其他位置按照平均值分配。也可以使用 px 像素来设定，但计算麻烦点。
目前最新的主流浏览器都支持 CSS3 的渐变属性，那么对于之前的浏览器支持度如何呢以参考如下的表：
| 是否支持带前缀 | Opera | Firefox | Chrome | Safari | IE |
|---|---|---|---|---|---|
| 部分支持需带前缀 | 11.5 | 无 | 4 ~ 9 | 4 ~ 5 | 无 |
| 支持需带前缀 | 无 | 3.6 ~ 15 | 10 ~ 25 | 5.1 ~ 6 | 无 |
| 支持不带前缀 | 12.1+ | 16+ | 26+ | 6.1+ | 10.0+ |
这里提到了部分支持，说明当时可能渐变还尚未完善，但可以通过添加前缀来使用它了。具体哪些没完善，已经无法考证了，版本太过久远。那么支持带前缀和不支持带前缀的完整格式如下：
repeating-linear-gradient 属性值和 linear-gradient 基本相同，不再赘述。
径向渐变
CSS3 提供了径向渐变，也叫做放射性渐变：radial-gradient 属性值。它是从一个点向四周发散的方式扩展。属性值样式表如下：
| 参数 | 值 |
|---|---|
| 方位 | 可选参数，径向的方位。可以使用的值有：像素、百分比、固定值，或复合搭配使用 |
| 起始色 | 必选参数，颜色值 |
| 末尾色 | 必选参数，颜色值 |
| 形状 | 说明 |
|---|---|
| circle | 圆形 |
| ellipse | 椭圆形，默认值 |
| 方向 | 说明 |
|---|---|
| top | 从顶部发散 |
| left | 从左侧发散 |
| right | 从右侧发散 |
| bottom | 从底部发散 |
| center | 从中间发散 |
| 半径关键字 | 说明 |
|---|---|
| closest-side | 指定径向渐变的半径长度为从圆心到离圆心最近的边 |
| closest-corner | 指定径向渐变的半径长度为从圆心到离圆心最近的角 |
| farthest-side | 指定径向渐变的半径长度为从圆心到离圆心最远的边 |
| farthest-corner | 指定径向渐变的半径长度为从圆心到离圆心最远的角 |
3、边框图片效果
属性解释
CSS3 提供了一个新的属性集合，用这几个属性可以嵌入图片形式的边框。这样，边框就可以自定义了。
属性设置
要实现边框背景，我们对图片也有一定的要求，否则效果不能完全体现出来。图片可以通过九宫格的切分来了解它。我们使用 W3C 官 上教学的图片来讲解一下。
单单只有这句话，webkit 引擎下的浏览器会在盒子区块的四个角看到一丁点图像的影子。而其他浏览器什么都看不到。这是由于没有设置边框背景图像的宽度导致的。
这里设置的是边框图像的宽度，而不是边框宽度。当你设置边框宽度，你会发现，文本会偏移。而边框图像的宽度不会挤压文本。
以上设置完毕后，支持边框背景图片的浏览器会在四个角落铺上这张图片的完整形式。这个时候需要通过引入切割属性来配置背景图片的显示方式。
这里的 27 不需要设置 px 像素，因为它默认就是像素。设置 27 之后，我们会发现边框的四个角正好是橘红色的四个角。那么你可以逐步放大或逐步放下这个值，来体验一下它的变化。
上面只是单独设置了一个像素表示四个边切割的大小，你也可以设置百分比、浮点值或者分别设置四个变的大小。
如果想让边框背景向外扩张，那么可以进行扩张设置。
四个角设定好之后，我们要设定四个变的显示排列方式。使用 border-image-repeat 属性，有四个值提供使用，分别如下表：
| 属性 | 说明 |
|---|---|
| stretch | 指定用拉伸方式填充边框背景图，默认值 |
| repeat | 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断 |
| round | 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小，直至正好可以铺满整个边框 |
| space | 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距，直至正好可以铺满整个边框 |
简写和版本
border-image 简写格式很简单，具体如下：
以上是手册上摘录的，转换成实际格式如下：
对于支持的浏览器及版本如下表：
| 是否支持带前缀 | Opera | Firefox | Chrome | Safari | IE |
|---|---|---|---|---|---|
| 部分支持需带前缀 | 11.5~12.1 | 3.5 ~ 14 | 4 ~ 14 | 3.1 ~ 5.1 | 无 |
| 支持需带前缀 | 无 | 无 | 无 | 无 | 无 |
| 支持不带前缀 | 15+ | 15+ | 15+ | 6+ | 11.0+ |
兼容加上前缀：
4、变形效果
HTML5 中 CSS3 的变形效果包括平移、缩放和旋转元素的功能。
transform
CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个：transform 和 transform-origin。
| 属性 | 说明 |
|---|---|
| transform | 指定应用的变换功能 |
| transform-origin | 指定变换的起点 |
对于 transform 的属性值，具体如下表：
| 属性值 | 说明 |
|---|---|
| none | 无变换 |
| translate(长度值或百分数值) translateX(长度值或百分数值) translatY(长度值或百分数值) |
在水平方向、垂直方向或两个方向上平移元素 |
| scale(数值) scaleX(数值) scaleY(数值) |
在水平方向、垂直方向或两个方向上缩放元素 |
| rotate(角度) | 旋转元素 |
| skew(角度) skewX(角度) skewY(角度) |
在水平方向、垂直方向或两个方向上使元素倾斜一定的角度 |
| matrix(4~6 数值，逗 隔开) | 指定自定义变换 |
transform-origin
transform-origin 属性可以设置变换的起点。默认情况下，使用元素的中心作为起点。具体设置方案参考如下表：
| 属性值 | 说明 |
|---|---|
| 百分数值 | 指定元素 x 轴或 y 轴的起点 |
| 长度值 | 指定距离 |
| left center right |
指定 x 轴的位置 |
| top center bottom |
指定 y 轴的位置 |
这个属性是用来改变变形的基准点的，默认是在元素的中心位置，如果你改变了基准点，它就会按照这个基准点进行变形。
// 默认值，以中心点变形transform-origin: center center;transform-origin: 50% 50%;// 以左上角为基准点变形transform-origin: left top;transform-origin: 0px 0px;
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！