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 ...
随机推荐
- Deployment failure on Tomcat 6.x. Could not copy all resources to……
http://blog.knowsky.com/194238.htm tomcat部署不成功 Deployment failure on Tomcat 6.x. Could not copy all ...
- JQGrid 学习1
这几天一直在学习基于MVC的JQGrid. 记得刚毕业时候做web最头疼的就是GridView,各种分页查询删除,后来学习了Ajax,使用的jqury UI框架ligerui给公司做ERP系统,再后来 ...
- Unity UI on the HoloLens
Following the steps under "Required configuration" will allow Unity UI to continue to work ...
- aar引用 no executable code found问题
主工程中 repositories { flatDir { dirs project(':trade_module').file('libs') }} dependencies { compile f ...
- Delphi 查找标题已知的窗口句柄,遍历窗口控件句柄(转)
用我的方法来控制其他程序窗体上的窗口控件,必须先了解什么是 回调函数.我的理解是这样的: 回 调函数写出来不是自己的程序去调用的,反而是让其他的东西去调用,比如windows操作系统,比如其他的程序等 ...
- 【转】日期工具类DateUtils
转自csdn,原作者:jzhf2012 package date.util; import java.text.ParseException; import java.text.SimpleDateF ...
- android studio新建hello world时出现Rendering Problems
The following classes could not be instantiated: - android.support.v7.internal.widget.ActionB ...
- xampp3.2下mysql中文乱码终极解决方案
xmapp3.2.2中mysql已经被替换成了Mariadb,网上那些显示char语句已经失灵. 另外本文主要介绍的是手动在mysql中写入中文乱码问题 那么我们将采用如下三个步骤解决乱码问题 1.打 ...
- 使用localResizeIMG微信压缩上传图片安卓报错 weixin://preInjectJSBridge/fail
微信上传图片是经常使用的功能,首先说一下使用的是:localResizeIMG进行图片压缩上传.感觉还是很好用,基本上功能都能满足. 但是最近在开发这个功能时遇到一个奇怪的问题,就是iphone|ip ...
- MySQL的数值类型,时间
数值类型 整数型 tinyint smallint mediumint int|integer bigint 注意: 1, 如何选择数据类型,我们的原则是:够用就行!尽量的选择占用内存小的整型 ...