CSS高效开发实战 4567

4 设计更炫目的字体

5 背景和颜色

6 更个性的边框

7 变换和动画

个性化字体的定义

@font-face{     font-family: myFirstFont;     src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); } div{     font-family:myFristFont; }

Font Awesome的使用，引入css和字体文件，然后在使用的地方使用<i class="图标类"></i>即可，如<i class="fa fa-camera-retro"></i>

反射box-reflect，图片文字均可以用。目前 只有webkit核心浏览器支持。所以不是标准的。

.box-reflect:{ <方向><间距><渐变效果>}

方向：above/below/left/right

间距 ：倒影和元素之间的额外距离

渐变效果：

• none：无遮罩图像
• <url>：使用绝对或相对地址指定遮罩图像
• <linear-gradient>：使用线性渐变创建遮罩图像
• <radial-gradient>：使用径向（放射性）渐变创建遮罩图像
• <repeating-linear-gradient>: 使用重复的线性渐变
• <repeating-radial-gradient>: 使用重复的径向

<h1 style="-webkit-box-reflect: below 1px radial-gradient(transparent, transparent 50%, rgba(0,0,0,.3))">dfdfdfdf</h1>

        linear-gradient一共有三个参数：

• • 第一个表示线性渐变的方向，top：从上到下、left从左到右，left top，从左上到右下。该参数可省略，默认top
  • 第二个和第三个参数分别是起点颜色和重点颜色。之间还可以插入更多的参数，表示多种颜色的渐变
  • transparent是rgba(0,0,0,0)的别名

字体阴影--光晕、浮雕、投影效果

<h1 style="text-shadow: 0 0 5px #ff0000;color:white;font-size: 60px;">光晕效果</h1>

<h1 style="text-shadow: 2px 2px 5px #000000;color:white;font-size: 60px;">浮雕效果</h1>

    

h-shadow，水平阴影的位置，允许负值；v-shadow，垂直阴影的位置，允许负值

blur，可选，模糊的距离；color可选阴影的颜色

字体描边

仅webkit核心浏览器支持，其实可以通过text-shadow定义多个值来实现。

IE6-9可以使用特有的滤镜来实现该效果

字体分栏

css3的多列效果，需要用到3个属性

• column-count: 定义分列的数量
• column-gap: 定义每一列中间的宽度
• column-rule: 定义分栏中间的样式。中间装饰线的宽度不会影响column-gap中定义的宽度
  • column-rule: 样式宽度  样式类型  样式颜色  column-rule: 2px outset red

  • div{   column-count:3;   -webkit-column-count:3;   column-gap:30px;   -webkit-column-gap:30px;   column-rule:1px dashed black;   -webkit-column-rule:1px dashed black; } .container{   margin:auto;   width:700px; }

字体溢出

example dd .user_name{

    display: block;

    white-space: nowrap;  //不允许换行

    text-overflow: ellipsis; //clip修剪文本  ellipsis 省略号代替  string 指定的字符串来代替

    overflow: hidden; //不允许出现滚动条

    width: 100px;  

}

第5章 背景和颜色

背景图片的大小

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。

background-size: 80px 60px;  第一个值是宽度，第二个值是高度；如果只设一个值，则高度默认是auto；

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

值	描述	测试
length	设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。	测试
percentage	以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。	测试
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。	测试
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。	测试

100%指的是相对于外围元素的100%，因此如果都配置成100%、100%，反而可能导致比例失调。

把图片拉伸、或者压缩成100%，然后高度或宽度auto去匹配。

还有两个可选项：cover和contain。 这两个选项都不会造成比例失真

cover：相当于图片宽度等于元素宽度，高度auto

contain：相当于图片高度等于元素高度，宽度auto

使用图片背景的origin和clip属性

注意： background-size一定要在指定图片之后设定，否则不生效。

图层叠加

允许设置多个背景图片，每个图片一层，写在前面的在最上面

可实现简单的层叠效果，但是会影响系统性能，多次服务器请求。

background:url( http://...) 0 0 no-repeat, url(...) 200px 0 no-repeat;

图片的Origin和clip属性

图像默认从内边距的左上角开始延展。origin可以指定从以下位置开始延展

• 边框左上角：border-box
• 内边距左上角: padding-box
• 内容左上角: content-box

origin控制的是开始延展图片的范围，clip控制的是元素背景的显示范围。

可选参数同origin相同，都是border-box、padding-box、content-box。

origin和clip是可以同时使用的。比如，origin确定整个图片从左上角开始延展，然后clip决定了只显示内容部分的范围。

颜色模式

RGB基础上，增加透明通道的RBGA模式，和工业届常用的HSLA颜色模式。

RGB可显示256× 256×256 = 16 777 216种颜色

RGBA是在RGB基础上添加了一个Alpha透明通道，可表示颜色的透明度。

如果Alpha数值为0%，就是完全透明的；100%是完全不透明。

HSLA中4个参数：色调、饱和度、亮度、透明度

Hue(色调)：0或360表示红色、120绿色、240蓝色，可取其他数值

Saturation(饱和度)：0%-100%之间的值

Lightness（亮度）：0%-100%之间的值

alpha（透明度）：0-1之间

HSLA的维度人类可以理解，rgb则便于计算机识别，可以先用HSLA调整颜色，然后再转换为RGBA。

以上只能处理颜色的透明度，可以通过opacity来处理图片的透明度。

渐变

渐变效果分为线性渐变(linear-gradient)和放射渐变(radial-gradient)两种。

线性渐变

三个参数：方向、起始颜色、结束颜色。

最简单的模式只需要定义其实颜色和结束颜色，起点、终点和方向默认字元素的顶部到底部。

.test{

    background:linear-gradient(red, blue);

}

.test{

    background: -webkit-linear-gradient(left, red, blue); //webkit

    background: -o-linear-gradient(left, red, blue); //opera

    background: -moz-linear-gradient(left, red, blue); //firefox

    background: linear-gradient(to right, red, blue);   //标准写法

}

标准写法写的是to right，火狐和opera下用right，webkit用起始位置left表示。

还可以用角度来表示:

0deg 相当于to top、90deg相当于to right、180deg相当于to bottom、270deg to left

线性渐变可以支持任何中颜色的渐变，如构造彩虹效果:

.test{

    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

}

放射渐变

放射渐变默认对指定颜色进行均匀渐变。但是可以指定发生渐变的位置，还可以指定中心点的位置。

还可以指定渐变的形状、circle还是ellipse。指定反射渐变范围的可选参数。

bootstrap通过渐变使得按钮具有立体感。

可以通过放射渐变来制作光影效果

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <style>             .test {                 width:200px;                 height:200px;                 font-size:80px;                 line-height: 200px;                 text-align:center;                 background: radial-gradient(#ffffff 20%, #000000);             }             .test1 {                 width:200px;                 height:200px;                 font-size:80px;                 line-height: 200px;                 text-align:center;                 background: radial-gradient(#feb3ad, #fd695d);             }         </style>     </head>     <body>         <div  class="test">赞</div>         <div  class="test1">赞</div>     </body> </html>

第6章 更个性的边框

CSS3新增了三种边框属性border：

• border-radius: 圆形边框
• box-shadow：边框阴影
• border-image：图片边框

border-radius 圆角边框：

可以使用像素做单位，可以使用百分比做单位(超过50%无效)

不同的角可以设置不同的弧度: border-top-left-radius: 30px;  border-bottom-left-radius: 3o0px;

border-shadow属性：

h-shadow 水平阴影的位置，可负值、v-shadow、blur（可选，模糊距离）、spread（可选，阴影的尺寸）

color（阴影颜色）inset（outset外部的阴影改为内部的阴影）

box-shadow{ color 水平偏移 垂直偏移 模糊距离 阴影尺寸 inset}

图片边框

border-image的属性：

border-image-source：边框向内位移

border-image-slice：

border-image-width：边框宽度

border-image-outset：边框图像区域超出边框的量

border-image-repeat:  repeat平铺、round铺满、stretch拉伸

第7章 变换和动画

变换 transform、渐变 transition、关键帧 @keyframes

变换类型

rotate旋转： transform:rotate(7deg); rotateX; rotateY; rotate3d;    rotateZ 等效于rotate

skew扭曲变换： transform:skew(30deg, 10deg); skewX,skewY; skew没有3d和skewZ选项

scale比例缩放： scale(1.1, 1.1)    scaleX   scaleY

translate位移变换：translate(100px, 20px) 向右位移100px，向下位移20px。可使用translateX(), translateY(), translateZ()

transition制作交互动画

jQuery可是改变某个元素的宽度，如$(element).css('width','300px');

执行结果是瞬间变到300px。平滑渐进也可以用js实现，但繁琐。

transition允许css在一定时间区间内平滑过渡。可在单击、获得焦点等时机出发，并圆滑地以动画效果改变CSS属性值。

.content{     height: 100px;     width:100px;     -webkit-transition: height 0.6s;     -moz-transition: height 0.6s;     -o-transition: height 0.6s;     transition: height 0.6s;  //如果高度发生改变，在0.6秒内完成平滑过渡 } .content:hover{     height:300px; }

如果要改变多个属性，可以用逗号隔开。

transition 还可以包含设置渐进动画的函数，可选择的有六种：

• ease：默认值，逐渐变慢
• linear：匀速
• ease-in：加速
• ease-out：减速
• ease-in-out : 加速后减速
• cubic-bezier：允许自定义时间曲线

transition: all .5s ease-in-out 1s;

all表示任意属性的变化都应用过渡动画效果； 四个参数一次为 属性、过渡事件、过渡函数、延迟时间

@keyframes制作动画

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title></title>         <style>             @-webkit-keyframes test { //定义名为test的动画                 0% {                     -webkit-transform: rotateY(0);                 }                 100% {                     -webkit-transform: rotateY(-360deg);                 }             }             .aaa {                 font-size: 29px;                 width:80px;                 height: 50px;                 background: green;                 animation: test 8s infinite linear;  //通过animation使用名为 test的动画                 -webkit-animation: test 8s infinite;             }         </style>     </head>     <body>         <div class="aaa">Good!</div>     </body> </html>

animation: test 8s infinite linear;

8s:动画执行一次的四件

infinite：动画循环的次数，infinite表示无限次

linear：动画的速度函数，同transition中的速度函数

还可以定义动画开始前的延迟时间、动画是否轮流反向播放等。

animation: name 8s linear 2s infinite alternate; //alternate表示动画正向循环后再反向循环

动画的控制：

animation-play-state: paused;  //paused暂停，running用于开启动画

-webkit-animation-play-state: paused;

https://github.com/IanLunn/Hover

CSS本身只能提供hover、visited等有限的几种触发条件，对于更复杂的场景，需要借助于JavaScript

如Move.js。  http://visionmedia.github.io/move.js/