Css3

@include box-shadow(rgba(88,88,88,0.4) 0 0 20px 5px);

最后不用的参数就可以不写，rgba可以设透明度alpha，所以在photoshop里面算好rbg值来写也挺好的。

上面示例的0 0 是纵向以及横向偏移值。

20px是位移，5px是扩散。

最后省略了一位 inset。

http://compass-style.org/reference/compass/css3/box_shadow/

另外还有两个常用的：文字阴影和自定义字体

@import "compass/css3/text-shadow"

@import "compass/css3/font-face"

 

Transform（变形）

　　Transform可以做到让元素：旋转、比例、斜切、平移。

transform: type(value) type(value) type(value) type(value);
　　对于旋转来说：
transform: rotate(value);
如果是正值的话，元素将会顺时针旋转，想法则会逆时针旋转。

Transition（变换）

　　该属性可以实现元素状态的平滑变换，它的参数如下：
transition:property duration timing-function delay;
其中，property代表需要进行变换的属性，duration表示变换持续的时间，timing-function表示计算时间的方法，delay表示变换延迟。

compass里面渐变写法居然在images模块。。

@import "compass/css3/images"

div{ @include background( linear-gradient(top left, #333, rgba(1,1,1, .3)),
radial-gradient(#c00, #fff 100px));
}//试过了，要多加颜色只要用逗号隔开颜色值和百分比，top left表示斜角，如果只要垂直的，就top，例如：
@include background( linear-gradient(top, #212121, rgba(1,1,1, .3),#fff .5,#f00 .7));

我本来想去stackoverflow提问，因为搜compass没什么答案。没想到一想发帖，标题栏就旧贴滚滚的出来了，不久就边编辑我的问题，边找到答案了。汗，也没什么好问的了。

直接的写法：

background: -webkit-gradient(linear, left top, left bottom,from(#000),color-stop(0.8,#212121),to(#000));

在80％的地方是＃212121，上下两侧是＃000

如果只有两个颜色过度：

background: -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#212121));

后来我找到一个在线生成gradient的网站http://www.colorzilla.com/gradient-editor/

真是帮了大忙了，多重渐变手写不能啊！

两头黑色，中间分34％到84％之间是＃212121：

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #000000 0%, #212121 34%, #212121 84%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(0%,#000000), color-stop(34%,#212121), color-stop(84%,#212121), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#000000 0%,#212121 34%,#212121 84%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#000000 0%,#212121 34%,#212121 84%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#000000 0%,#212121 34%,#212121 84%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#000000 0%,#212121 34%,#212121 84%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

老一点的写法貌似没效果嘛：

.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*在不支持该特性的浏览器中依然使用背景图片*/
background-image: -moz-linear-gradient(top, #07407c, #aaaaaa);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color-stop (1, #aaaaaa));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c',EndColorStr='#aaaaaa')";
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa');
}

 

css3可以用几张图片做随机平铺的背景，所谓多重背景Multi-Background

background-image: url(29-a.png),url(37-a.png), url(53-a.png);

background:url(body-top.gif) top left no-repeat,url(body-bottom.gif) bottom left no-repeat,url(body-middle.gif) left repeat-y;

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' body-top.gif',sizingMethod='scale')";
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='body-top.gif', sizingMethod='scale');

 

选择器（伪类）：

:root｛｝相当于html｛｝

E:nth-child(n)，nth-last-child(n)，E:nth-child(even)，E:nth-child(odd)==E:nth-child(2n) { … }

算法例：选中前5个 li:nth-child(-n + 5) { … }

E:first-of-type 与 :last-of-type

　　:first-of-type用来确定第一个元素的样式，而:last-of-type则相反。

 :only-of-type() 只会应用于在父元素下只有一个子元素的父元素中。

E:last-child，E:first-child，E:only-child

E:empty 选择没有子元素和内容的元素。

E:target 链接的URL

:checked，:enabled与:disabled 例如，input:disabled

E:not

input:not([type=submit]) { … }
input:not(disabled) { … }
第一行选中除了submit按钮之外的所有元素，第二行选中所有使能的input。

-webkit-box

提供的关于盒模型的几个属性：
box-orient                 子元素排列 horizontal  |  vertical  |  inline-axis  |  block-axis  |  inherit
box-flex                     兄弟元素之间比例，仅作一个系数 
box-align                   box 排列 
box-direction             box 方向 
box-flex-group           以组为单位的流体系数 
box-lines             
box-ordinal-group      以组为单位的子元素排列方向 
box-pack

父级元素是display : -webkit-box
子元素可以使用 -webkit-box-flex:数量;
按数量等分布局。比百分比更精确。

还可以用来支持溢出自动加省略号：

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

作为-webkit-box，可以控制显示的行数，

overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

 

 

待续。。