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 ...
随机推荐
- [git]rebase和merge
转自:http://blog.csdn.net/wh_19910525/article/details/7554489 Git merge是用来合并两个分支的. git merge b # 将b分支合 ...
- Windows 查看端口占用和关闭进程
支持原创地址 :http://www.cnblogs.com/moodlxs/p/4145384.html 开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PI ...
- Actionscript Flash Event.ENTER_FRAME 延迟间隔非常大 并且 pre-render 耗时非常严重
我遇到的问题是代码中不断的添加一个图标到舞台上,而且这个图标非常小,所以从内存也看不出什么问题. 但是由于舞台物件太多了,并且不断添加,导致渲染耗时严重. 而且这种错误,开发工具并不会报错,也不属于死 ...
- Silverlight 缓存控制策略
通常我们用html或asp.net页面承载Silverlight包,由于浏览器缓存机制的存在,使得你的应用更新时,客户见到往往是旧版的程序,而完全禁止缓存,每次打开页面都要重新下载xap,对于体积较大 ...
- Flask 的 Context 机制
转自https://blog.tonyseek.com/post/the-context-mechanism-of-flask/ Flask 的 Context 机制 2014 年 07 月 21 日 ...
- 实例存储支持的AMI创建步骤
实例存储支持的AMI创建步骤 一.Windows AMI 1. 选择实例存储支持的AMI创建实例. 2. 远程登录实例进行定制化配置. 3. 通过Web控制台或命令行Bundle实例(并自动上传到S3 ...
- 剑指Offer:面试题29——数组中出现次数超过一半的数字(java实现)
PS:在前几天的面试中,被问到了这个题.然而当时只能用最低效的方法来解. 问题描述: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2, ...
- win7远程桌面恢复全屏状态快捷键
不同的电脑可能有不同的快捷键(有些笔记本电脑甚至没有相应的键值):①台式机:ctrl+alt+break 组合键.②CTRL+ALT+PAGEDOWN 组合键.③有的笔记本没有break键,可以尝试加 ...
- MonkeyRunner测试一MonkeyRunner的使用
最近搭建MonkeyRunner开发环境,安装PyDev时,饱受折磨,现在终于搞定.因为一些原因,用了JDK1.6,在线安装插件PyDev成功后,Windows-Preferences里找不到PyDe ...
- 在大于32GB或64GB容量的SD卡上使用NOOB安装树莓派 - Using NOOB on SD cards larger than 32GB or 64GB for Raspberry Pi
在树莓派上玩了一小段时间了,因为装的软件包越来越多,所以越来越感觉16G的SD卡没办法长期使用下去.于是采购了几张64G的SD卡,打算周末装上系统.可是按照一般的流程,在Windows下用SD For ...