css3属性整理
浏览器内核:主流内容主要有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;
}
css3属性整理的更多相关文章
- 常用CSS3属性整理
常用CSS3属性整理 文本 文本超出部分折叠 white-space:nowarp; overflow:hidden; text-overflow:ellipsis word-warp 边界换行 no ...
- 【原】常见CSS3属性对ios&android&winphone的支持
2个月前,我在博文<webapp开发中兼容Android4.0以下版本的css hack>中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了” ,在 ...
- 如何处理CSS3属性前缀
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- CSS3属性 box-shadow 向框添加一个或多个阴影
CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
- 实用的CSS3属性和使用技巧
CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...
- H5、CSS3属性的支持性以及flex
一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...
- 移动端 几个css3属性的练习
转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heigh ...
随机推荐
- C#中的DateTime:本周第一天,本月第一天,今年第一天,本周第一天的时间
有时辰需要按照当前时刻,断定其它的都没有什么难度,只是本季度稍稍麻烦些.因为一年有四个季度,可以按照当前月份,获得本季度第一个月的月份,然后这个月的第一天,就是本季度的第一天了 DateTime dt ...
- Javascript之改变盒子颜色
index.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- Web 服务器上的请求筛选被配置为拒绝该请求,因为查询字符串过长
get请求方式中,传递的参数的值不能太多.是有长度限制的. http://test.jz.gaitu.cn:80/appMana/TemplateImgOutput.aspx?TemplateID=1 ...
- Entity Framework 6.1 学习系列1--概况、安装
原文:Entity Framework 6.1 学习系列1--概况.安装 Entity Framework:实体框架,看名字就知道是针对模型数据的.这是MS推出的一款ORM工具. 与NHibernat ...
- JavaScript学习笔记(13)——BOM
1.window 所有浏览器都支持window对象,它表示浏览器窗口本身. 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 window 对象的属 ...
- union 中可以存储的是不带构造函数的类对象
union 中可以存储的是不带构造函数的类对象 否则不符合逻辑 为什么不符合逻辑?
- TestNG使用总结
1.Eclipse中安装TestNG的方法 打开Eclipse Help ->Install New Software , 然后Add "http://beust.com/ ...
- jquery ListBox 左右移动
<head runat="server"> <title>无标题页</title> <script type="text/jav ...
- Android学习1
Activity学习(1) 只有一个Activity 进行Toast通知 Toast是一种短小的提醒,显示一段时间就会消失,试验学习,可以通过一个Button来实现. Button reg=(Butt ...
- syntaxhighlighter语法高亮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...