浏览器制造商（像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属性的更多相关文章

  1. css中的字体及文本相关属性

    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

  2. css hack 浏览器携带自身特有的属性 （二）

    css hack 浏览器携带自身特有的属性,才是我们真正要解决的css 兼容问题. 这里只是分享思路. 举例子: 1 outline,尤其是一些 自带继承特性的属性.这里指的是 隐性的inherite ...

  3. CSS中的盒子模型与 box-sizing 属性

    盒子模型是css中一个重要的概念,是开发网页必须要用的布局方法.盒子模型有两种,分别是标准 w3c 盒子模型和 ie 盒子模型. 标准 w3c 盒子模型:包括 magin(外边距).border(边框 ...

  4. CSS中 Padding和Margin两个属性的详细介绍和举例说明

    代码示例: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  5. CSS中padding、margin、bordor属性详解

    一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以 ...

  6. CSS中控制换行的四种属性

    一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例. Example Source Code 语法: white-space : normal  ...

  7. css中的position:relative和absolute 属性

    语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象 ...

  8. css中可继承和不可继承属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

  9. 解决谷歌浏览器设置font-family属性不起作用,(css中设置了font-family:没有用)css字体属性没用

    嗯,这个问题百思不得解.其他的浏览器器都没问题,在谷歌上就不行,网上找了很多,都没效果,后才发现,当然同样的问题可能错不一样的地方,我的解决方案: 感觉主要原因是自己也没查到,乱改一堆,就OK啦: 1 ...

随机推荐

  1. 有wsdl地址生成客户端调用

    新建Java Project 1.项目名称:HelloWorldClient 2.建好的项目 3.生成客户端 选择HelloWorldClient 填写wsdl地址(参考:myeclipse构建web ...

  2. Rails :布局和视图渲染

    原文地址: http://guides.ruby-china.org/layouts_and_rendering.html Rails 布局和视图渲染 本文介绍 Action Controller 和 ...

  3. lumen 构建api（dingo api）

    什么是 API API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力, ...

  4. Windows 10 LTSB

    没有商店,没有EDGE,没有助手. 有平板模式,但没有通用应用,内置便笺也没有.可以“固定到开始屏幕”,但没有动态磁贴.有虚拟键盘,但没有Windows Ink. 只有安全补丁更新,据说是10年. 安 ...

  5. 数据库MySQL基本语法思维导图

  6. MySQL 使用笔记

    1. How to export the database of mysql go to command line,  use "CMD" cd C:\Program Files\ ...

  7. [转载]给IT人员支招：如何跟业务部门谈需求分析？

    一提跟业务人员做“需求分析”,许多IT人员立刻就头大了,要么不在同一个“频道”讲话,要么“变来变去,定不下来”.如何跟业务部门谈需求分析呢,我们带着这个问题,与聚冠因尚的咨询顾问杨春波展开了讨论. 1 ...

  8. C# 抽象类abstract

    不能初始化的类被叫做抽象类,它们只提供部分实现,但是另一个类可以继承它并且能创建它们的实例,有未被实现的方法.抽象类不可以new对象. "一个包含一个或多个纯虚函数的类叫抽象类,抽象类不能被 ...

  9. XE6 & IOS开发之开发者账号、苹果证书（3）：关于在XE6中使用苹果证书的简单介绍

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.关于在XE6中使用苹 ...

  10. Android RelativeLayout用到的一些重要的属性

    转载自 http://mobile.51cto.com/android-265842.htm 第一类:属性值为true或false android:layout_centerHrizontal  水平 ...