CSS各种问题积累

1.background与background-color</p>

这两者都可以这么用:background:red; background-color:red; 其实background-color只是background的一个子项而已。完整的background包括

background-color

background-image

background-repeat

background-attachment

background-position

完整的写法是这样的background: #00FF00 url(bgimage.gif) no-repeat fixed top; 

2.第一条中的background属性值的第一个在css3中可以是各种过渡效果的,比如线性过渡、径向过渡。例如代码:

background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);

详细的请看:http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html

3.上面的background-image属性还真是不好搞了,一定了解之后发现在过渡效果时-webkit-的写法很麻烦,-webkit-的过渡效果有两种实现,较传统的是-webkit-gradient(),较新的是-webkit-linear-gradient().由于-webkit-gradient()是所有写法中最复杂的,所以详细讲解,其它的应该就能轻松掌握了。

先看background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(.5,rgba(0,255,0,1)),to(rgba(255,255,255,1)));

1. linear指出是线性渐变,当然还可以写radial,表示径向渐变。

2. 0 0,0 100% 这两组参数成对出现,表示开始的位置和结束的位置。0代表像素值,100%是相对位置表示法,指的是直到结束的位置。

3. from()与后面的to()是一对,但都是可写可不写的货,表示颜色值,关于它的参数可以直接填如#fff,或者transparent(透明)、rgba颜色值。

4. rgba色值的格式rgba(255,255,255,1),前三个参数不多说了,后面的1代表的是透明度,可以取0-1之间的数,但不能写成0%-100%

5. color-stop()意思是在指定的位置,放置一个指定的色值。.5在中段位置,也可以写成50%同样是指中段位置。当你用一系列的color-stop去描述色值分布时便可不用from,to方法了。

color-stop(0,transparent)=from(transparent),color-stop(1,transparent)=to(transparent)。但是当不是从0开始的,且没有from时前面的色值默认为第一个color-stop指定的色值。

4.background-size:20px 40px;其中第一个参数指的是width,第二个是height

5.word-spacing 与 letter-spacing

word-spacing指的是左右两个单词之间的距离;letter-spacing指的是左右两个字母之间的距离。

6.在css的position中常见的属性有这几个:absolute relative fixed static。 

static : 默认,没有任何效果,top button等也不起作用

absolute:相对于它的非static父类的定位 (让出之前的位置)

fixed:相对于浏览器窗口的定位(以前一直觉得这时absolute实现的效果,其实absolute也是一种相对的定位方式)。

relative:相对与其父类的定位 (之前的位置还会保留)

详细的解释见:http://diandian.cw66.com/post/2012-09-04/40038049036

posted @ 2013-04-25 11:55  张小然  阅读(292)  评论(0编辑  收藏  举报