CSS中浏览器开发商特定的CSS属性
浏览器制造商(像Microsoft、Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性,
或者实现一直在考虑但还没有得到标准组织批准的CSS扩展。在这些情况下,开发商会创建类似这样的CSS属性:
-moz-transform: 第一个是短横线"-";第二个是开发商标识符,moz指Mozill;后面是一个短横线"-";最后是属性
通常可以在各个浏览器的开发文档和发行说明中找到这些开发商特定的属性,
或者可以加入与各浏览器开发过程相关的论坛,从中可以了解到开发商特定的属性。
例如:
div{
transform: rotate(45deg); // 通用属性,以保证属性得到支持,或者至少将来得到支持
-webkit-transform: rotate(45deg); //safari chrome
-moz-transform: rotate(45deg); //Mozilla
-o-transform: rotate(45deg); //Opera
-ms-transform: rotate(45deg); //IE
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#box{
position:absolute;
top:100px;
left:200px;
width:200px;
height:200px;
background-color:#ff0000;
transition: transform 2s; /* transition属性指出:如果transform属性的值改变,要在指定的实际内从当前transform值过度到新的transform值 */
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-o-transition: -o-transform 2s; /*
transition属性值也是一个属性,在这里transition属性值为transform,另外还有一个持续的时间(duration),即2s。
指定的属性值改变是,transition会使这个变化在指定的时间内完成,这就是产生一个中动画效果。还可以对其他CSS属性
完成过度,如width或者opacity。
*/
}
/* 当鼠标悬停时,div旋转45度 */
#box:hover{
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
CSS中浏览器开发商特定的CSS属性的更多相关文章
- css中的字体及文本相关属性
css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...
- css hack 浏览器携带自身特有的属性 (二)
css hack 浏览器携带自身特有的属性,才是我们真正要解决的css 兼容问题. 这里只是分享思路. 举例子: 1 outline,尤其是一些 自带继承特性的属性.这里指的是 隐性的inherite ...
- CSS中的盒子模型与 box-sizing 属性
盒子模型是css中一个重要的概念,是开发网页必须要用的布局方法.盒子模型有两种,分别是标准 w3c 盒子模型和 ie 盒子模型. 标准 w3c 盒子模型:包括 magin(外边距).border(边框 ...
- CSS中 Padding和Margin两个属性的详细介绍和举例说明
代码示例: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- CSS中padding、margin、bordor属性详解
一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以 ...
- CSS中控制换行的四种属性
一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例. Example Source Code 语法: white-space : normal ...
- css中的position:relative和absolute 属性
语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象 ...
- css中可继承和不可继承属性
一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...
- 解决谷歌浏览器设置font-family属性不起作用,(css中设置了font-family:没有用)css字体属性没用
嗯,这个问题百思不得解.其他的浏览器器都没问题,在谷歌上就不行,网上找了很多,都没效果,后才发现,当然同样的问题可能错不一样的地方,我的解决方案: 感觉主要原因是自己也没查到,乱改一堆,就OK啦: 1 ...
随机推荐
- Eclipse几个版本号的区别
查看Eclipse的版本号: 1. 找到eclipse安装目录 2. 进入readme文件夹,打开readme_eclipse.html 3. readme_eclipse.html呈现的第二行即数字 ...
- jquery mobile 登陆后页面验证
调用 pagebeforechange方法 $(document).bind("pagebeforechange", function (e, data) { if (typeof ...
- python中的单引号,双引号,三引号
转载自: http://blog.csdn.net/wanghai__/article/details/6285310 先说1双引号与3个双引号的区别,双引号所表示的字符串通常要写成一行 如: s1 ...
- sed字符串替换
把drivers目录下的所有pr_log替换成:pr_snd sed -i "s/pr_log/pr_snd/g" `grep pr_log -rl drivers/` 把driv ...
- Android 蓝牙打印超时问题的处理
http://stackoverflow.com/questions/18657427/ioexception-read-failed-socket-might-closed-bluetooth-on ...
- 从jquery源码中看类型判断和数组的一些操作
在深入看jquery源码中,大家会发现源码写的相当巧妙.那我今天也通过几个源码中用到的技巧来抛砖引玉,希望大家能共同研究源码之精华,不要囫囵吞枣. 1.将类数组转化成数组 我想大家首先想到的方法是fo ...
- R&S学习笔记(二)
1.OSPF:路由条目1万多条.收敛时间1s:ISIS:路由条目可以达2万多条,收敛时间50ms().ISIS在链路层上面,不依赖IP这层,这样给了它很多可能.比如IPv4, IPv6路由的混合承载, ...
- spark1.3编译过程中遇到的一个坑
在编译spark1.3.0时: export MAVEN_OPTS="-Xmx2g -XX:MaxPermSize=512M -XX:ReservedCodeCacheSize=512m&q ...
- mapreduce核心原理
1:第一阶段: 第一阶段的task每一个nodemanager并发运行程序,完全并发,各不影响.这就是map阶段 运行的task时maptask 2:第二个阶段的task并发实例互不相干,但是他们的数 ...
- 静态static
静态使用注意: 1.静态方法只能访问静态成员(方法和变量).非静态方法既可以访问静态也可以访问非静态. 2.静态方法中可以定义this,super关键字.因为静态优先于对象存在. 3. 主函数是静态的 ...