浏览器制造商（像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. 支持Cookie并开放了一些特殊设置项的HttpWebClient

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

  2. 压力测试 php-fpm 优化

    webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好,安装使用也特别方便. 1.适用系统:Linux 2.编译安装:引用wget http: ...

  3. js对话框5秒自动消失

    使用了easyui的对话框控件 <html> <head> <title>5秒后关闭对话框</title> <meta http-equiv=&q ...

  4. CentOS 7如何连接无线网络

    虽然查阅了相关网络资料,但是以下内容均为原创内容,只有干货,无废话. 1.切换到超级用户 [Oscar@localhost 桌面]$ su root 2.查询可用的无线网卡,其中红色为网卡号 [Osc ...

  5. 读取 java.nio.ByteBuffer 中的字符串（String) 写入方式flash.utils.ByteArray.writeUTF

    通过研究ByteArray的写入格式以及方法说明,可以发现writeUTF是先使用2位写入字符串的长度,然后在其后写入字符串编码. flash.utils.ByteArray.writeUTF(val ...

  6. hadoop 完全分布式 下 datanode无法启动解决方法

    问题描述: 在集群模式下更改节点后,启动集群发现 datanode一直启动不起来. 我集群配置:有5个节点,分别为master slave1-5 . 在master以Hadoop用户执行:start- ...

  7. matlab工具箱之人眼检测+meanshift跟踪算法--人眼跟踪

    Viola-Jones 人眼检测算法+meanshift跟踪算法 这次的代码是对视频中的人眼部分进行检测加跟踪,检测用的是matlab自带的人眼检测工具箱 下面是matlab官网介绍这个算法的一些东西 ...

  8. Heka 的编译 和 Heka 插件的编译

    相关英文文档在: https://hekad.readthedocs.io/en/latest/installing.html 所有系统都必须的如下: Prerequisites (all syste ...

  9. jQuery MiniUI开发系列之：数据验证

    在开发应用系统界面时,往往需要进行很多.复杂的数据验证,当填写的数据符合规定,才能提交保存. jQuery MiniUI提供了比较完美的表单数据验证和错误显示的方式. 常见的表单控件,都有一个验证事件 ...

  10. 解决触摸屏设备click事件300ms的延迟的问题

    从点击屏幕上的元素到触发元素的 click 事件,移动浏览器(触摸屏)会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作.300ms的等待 ...