在CSS样式中很多样式名前缀都带有’-webkit-‘,但在CSS提供的API中查询不到这些样式名。

原因:CSS3中新增了一些属性,针对不同的浏览器,规定其内核名称让它们可以对这些新增属性进行解析。

解释:前缀为“-webkit-”的属性,能够在以webkit为内核的浏览器中正常使用。

各个不同浏览器内核列表:

            -moz代表firefox浏览器私有属性;

            -ms代表IE浏览器私有属性;

            -webkit代表chrome、safari私有属性;

            -o代表Opera私有属性

使用原因:为了浏览器兼容,某些css的API只支持IE10+,例如transform,直接使用为W3C的标签,对IE9+不支持,要兼容浏览器需要添加前缀

{
transform:translate(10,10) // W3c标准
-webkit-transform:translate(10,10) // Safari Chrome
-moz-transform:translate(10,10) // firefox
-ms-transform:translate(10,10) // IE9
-o-transform:translate(10,10) // opera }

css3中-webkit是什么意思的更多相关文章

  1. css3中webkit内核的滚动栏样式

    项目其中用到的滚动栏样式,在别人的基础上调成适合自己的样式.(IE能够调试滚动栏样式,firefox眼下不能调试) ::-webkit-scrollbar { width: 14px; }/* Tra ...

  2. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  3. css3中的前缀

    css3中: -o-:opera -moz:firefox -webkit:safari chrome -ms:IE9

  4. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  5. CSS3 中border-image详解

    CSS3 border-image详解.应用及jQuery插件 一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊 ...

  6. CSS3中新出现的技术

    CSS3中新出现的技术 CSS媒体查询 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定 ...

  7. CSS3中渐变gradient详解

    这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西. CSS3中的Gradient有两种,分别是线性渐变(linear-gradien ...

  8. CSS3中的弹性流体盒模型技术详解

    先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局.   其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...

  9. CSS3中border-image属性详解

    border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...

  10. css3中的变形(transform)、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

随机推荐

  1. python爬虫学习——文件操作,异常处理

    文件操作 ''' f = open("a.txt","w") #打开一个文件, w模式(写),如果文件不存在就在当前目录下创建 f.write("he ...

  2. CF1638E Colorful Operations

    \(\text{Solution}\) \(\text{code}\) #include <cstdio> #include <iostream> #include <s ...

  3. Cobalt Strike 之:域内渗透

    郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责,共同维护网络文明和谐. Co ...

  4. Compiler25th005: Excel Compiler

    Excel Compiler XCell Compiler, also known as Excel Compiler, offers very strong and hassle free Micr ...

  5. idea代码格式xml

    <code_scheme name="Default copy" version="173"> <option name="LINE ...

  6. TP框架在nginx中的配置

    TP框架配置中默认URL_MODEL=1,而Nginx默认是不支持PATHINFO的.如果我们只想跑起来tp框架,很简单,只需到更改TP配置,设置URL_MODEL=3(兼容模式).但是如果要让Ngi ...

  7. C# 游戏雏形 人物地图双重移动

    1. 设计出发点 准备做一个旅游短视频,想实现一个小人或汽车在百度地图上按指定路线移动的效果,把之前自己写的代码拿出来,修改完成. 主要修改内容: (1)实现了人物地图双移动.即如果人物向屏幕中间移动 ...

  8. 【树莓派】在vscode中连接树莓派并编写代码

    在树莓派里编写代码的话会比较麻烦因此可以在vscode中通过ssh连接树莓派并且编辑代码 参考: vscode通过ssh连接树莓派实现远程开发 VSCODE 远程开发树莓派 使用vscode打造pyt ...

  9. echarts 总结

    ECharts访问链接 https://blog.csdn.net/Yi2008yi/article/details/122808328 :force-use-old-canvas="tru ...

  10. [jQuery]判断页面是否滚动到底部

    方法1:判断可见高度+滚动高度是否等于内容高度 但经过测试UC.QQ.华为浏览器,这个方法不生效.(打印查因:可能由于屏幕缩放,可见高度和滚动高度会偏小. $(this).scroll(functio ...