css3属性整理

时间:2022-12-29 14:15:12

浏览器内核:主流内容主要有Mozilla(熟悉的有Firefox,Flock等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Opera(Opera浏览器)、Trident(讨厌的IE浏览器)

-moz- 针对Mozilla内核的浏览器
-WebKit- 针对WebKit内核的浏览器
-o- 针对Opera浏览器

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)

格式:-moz-linear(类型)-gradient(方向,起点颜色,终点颜色)
颜色最少为俩值方向可以有两个方向 方向可以没有

参数:其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left
top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。如图所示:

IE浏览器用滤镜实现颜色渐变:filter:
progid:DXImageTransform.Microsoft.gradient(GradientType=0,

startColorstr=#1471da, endColorstr=#1C85FB);
  -ms-filter:
"progid:DXImageTransform.Microsoft.gradient (GradientType=0,

startColorstr=#1471da, endColorstr=#1C85FB)";}

IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。

::selection  不解释
自己看效果

::selection {
background: 颜色值;
color:颜色值;
}

::-moz-selection {
background: 颜色值;
color:颜色值;
}

::selection在IE家族中,只有IE9+版本支持,在Firefox中需要加上其前缀“-moz”,查阅相关w3c官方资料,并没有对这个属性的解说资料,只知道这个属性被规纳在CSS的伪类选择器中。

HTML标签建议

html {
font-size: 100%;
overflow-x: hidden;
overflow-y:scroll;
-webkit-tap-highlight-color: transparent;

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
height: 100%;
}

图片的缩放在IE7以及IE6下是件很恐怖的事情,将严重影响您的图片质量,欲解决,记得在img标签上加上下面的代码:

img {
-ms-interpolation-mode: bicubic;
}