CSS各种问题积累

最新推荐文章于 2024-02-03 23:09:22 发布

weixin_34000916

最新推荐文章于 2024-02-03 23:09:22 发布

阅读量43

点赞数

原文链接：http://www.cnblogs.com/zhangran/archive/2013/04/25/2968701.html

版权

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等也不起作用