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 ...
随机推荐
- [zz] 基于国家标准的 EndNote 输出样式模板
基于国家标准的 EndNote 输出样式模板 https://cnzhx.net/blog/endnote-output-style-cnzhx/ 发表于 2013-05-26 作者 Haoxian ...
- 【java】org.apache.commons.lang3功能示例
org.apache.commons.lang3功能示例 package com.simple.test; import java.util.Date; import java.util.Iterat ...
- 【MySQL】锁入门
要做的完全掌握MySQL/InnoDB的加锁规则,甚至是其他任何数据库的加锁规则,需要具备以下的一些知识点 了解数据库的一些基本理论知识:数据的存储格式 (堆组织表 vs 聚簇索引表):并发控制协议 ...
- Unity关于脚本前面的勾选框
今天做项目时需要在某个事件条件下禁用某个脚本,但是突然发现这个脚本前面没有勾选框,,,就像这样 网上搜了下,原来是需要在脚本中加上void Start()方法,即使这个方法里什么都没有 void St ...
- 为什么使用 Redis及其产品定位
摘自:http://www.infoq.com/cn/articles/tq-why-choose-redis 传统MySQL+ Memcached架构遇到的问题 实际MySQL是适合进行海量数据存储 ...
- jcmd、jmc介绍
一.jcmd命令使用 概述 在JDK 1.7之后,新增了一个命令行工具jcmd.它是一个多功能工具,可以用来导出堆,查看Java进程,导出线程信息,执行GC等. 使用示例 下面这个命令能够列出当前运行 ...
- linux备份mysq脚本
filename=`date +%Y%m%d_%H%M%S`database=finebwservername=officialcreatefilename=${servername}_${datab ...
- 80、Android Support v4、v7、v13的区别以及应用场景
一.简介 在 Android 开发中,为了使用高版本API的新特性,需要添加额外的包来使用这些新特性,这就是 Android Support 包 二.分类 Android Support v4: 这个 ...
- [Linux编程] module_param()函数学习笔记
在读TCP cubic源码中,遇到了module_param(),网上查到的资料如下: 在用户态下编程可以通过main()来传递命令行参数,而编写一个内核模块则可通过module_param()来传递 ...
- git 源代码下载和安装(CentOS)
1.阅读INSTALL文件 $ make configure ;# as yourself$ ./configure --prefix=/usr ;# as yourself$ make all do ...