ePUB制作经验汇集-雨浪飘零 - (EPUB全文下载)

文件大小：1.03 mb。
文件格式：epub 格式。
书籍内容：

宇宙伸展过程
CSS特效
CSS3新增一些特效，可以得到比较美观的显示效果。但是特效会严重影响阅读器的响应速度，因此，如无必要，不建议多用特效。
1．圆角边框
border-radius（含义是"边框半径"）可以为元素设置圆角效果。为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、px、百分比等等，但在阅读器中，有可能不支持百分比，因此建议仅用前两个单位。
其值设置1到4个。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。
border-radius:10px;
border-radius:50px 25px;
border-radius:25px 10px 50px 0;
还可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以同时设置1到4个值，应用规则与第一组值相同。
CSS3提供四个单独的属性可以针对对每个角进行设置。这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius 属性需要与边框的其他属性配合使用，如果没有设置边框，则此属性无法发挥作用。通过与颜色、宽度等配合，可以做出比较复杂的边框效果。
圆角效果测试：
我是圆角测试
我是圆角测试
我是圆角测试
2．文字阴影
text-shadow 属性可以给文本添加阴影，可指定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。其语法如下：
text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)];
text-shadow: 5px 5px 5px #FF0000;
X-Offset 表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；
Y-Offset 是阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；
Blur 是阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color 是阴影的颜色，其可以使用rgba色。
通过该属性的各项参数设置，配合文字颜色，可以做出很多阴影效果。但要注意，此特效用多了载入页面会很慢（像死机），因此不建议多用该属性。
text-shadow: 0 1px 0 red;
text-shadow
注意：多看和掌阅均支持文字阴影，但不支持多重阴影。
3．变形转换：
transform属性应用于元素的2D或3D转换，可以将元素旋转、缩放、移动、倾斜等。最新的浏览器基本都支持，但阅读器一般仅支持2D转换。
transform的属性包括：
transform:rotate(90deg)：旋转；正数为顺时针旋转，负数为逆时针旋转。
transform:skew(10deg)：倾斜；一个参数时，表示水平方向的倾斜角度；两个参数时，第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
transform:scale(1.5)：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。
transform:translate(120px,10px)：位移；表示向右位移120像素，向上位移10px，如果向左向下位移则为负“-”。
括号中的单位是“deg”（即“度”的意思，如“10deg”表示“10度”）。
另外，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
transform: rotateY(180deg); 水平翻转
transform: rotateX(180deg); 垂直翻转
注意：
（1）水平翻转或垂直翻转不同于旋转180度。前者以轴为镜像，后者以点为镜像。
（2）如果是对称元素，旋转180度和翻转的显示效果基本上就是一致的，但是，非对称元素就会看到明显差异。
在阅读器中，一般rotate和skew支持比较多，后两个则不支持。另外，不同阅读器对各个属性的支持规范不一样，所以在使用时尽可能引用更多的浏览器属性，如下表示元素翻转180度：
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
transform:rotate(180deg);
4．边框图片
可以用 border-image 属性设置边框背景图。它有 round 和 stretch（默认）两个特殊的值，分班表示平铺与拉伸（其他值的说明参考网上教程）。如下例：
border-image:url(../border.png) 30 30 round;
border-image:url(../border.png) 30 30 stretch;
在这里，图片铺满整个边框。
在这里，图片被拉伸以填充该区域。
注意：每个阅读器对边框图片的支持不同。如多看对边框图片仅支持拉伸方式，平铺方式边框只能显示四个角。掌阅和iBooks则全部支持。
5．边框阴影
box-shadow 属性可以给元素块添加周 ............

书籍插图：

以上为书籍内容预览，如需阅读全文内容请下载EPUB源文件，祝您阅读愉快。