关闭

为什么会出现CSS前缀?

时间: 2020-04-01阅读: 475标签: 样式

使用过css3属性的同学都知道,css3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀。这是为什么呢?

CSS3的前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。  浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准。

前缀浏览器内核
-ms-IE浏览器Trident内核
-moz-FirefoxGecko内核
-o-OperaPresto内核
-webkit-Chrome和SafariWebkit内核

来看一个简单的示例,早期写一个圆角 border-radius ,需要这样写:

.box {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}
如果只写移动端的话就加-webkit-前缀和css3属性就可以 。


CSS3前缀+标准代码的顺序
既然CSS3代码中(暂时)需要写上这么多前缀,那么他们的顺序是如何的呢?是先写私有的CSS3属性,再写标准的CSS3属性。

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/

需要说明的是:一旦官方宣布支持这个CSS样式了,就可以去掉前缀,被所有的主流浏览器使用了,比如border-radius,现在不加前缀也可以使用  



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8482

关闭

CSS3 简单的砸金蛋样式

实现样式:1、鼠标移入后,鼠标样式图标变为“锤子”。2、用户砸金蛋,锤子简单的扬起效果。3、砸碎金蛋,显示内容

CSS 中重要的层叠概念

最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因此找了一下css有关层叠方面的资料,解决了这个问题,这里记录一下

js怎么移除css样式?

在工作中,经常需要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的

vue用v-html加载渲染,里面的内容样式不生效

需要输出富文本的内容,需要设置里面的图片样式最大宽度100%。可是设置img 100%后没反应,看F12检查元素也没加上去。解决方法有2个:coped属性导致css仅对当前组件生效

CSS 边框样式

我们来学习边框样式,主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时,可以分为上下左右四个边框,既可以同时设置四个边框的样式,也可以分开设置四个边框的样式。

整理一些少用但又实用的 CSS 样式

什么是偏门,就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 CSS 样式,input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色

JavaScript自定义getStyle方法获取元素样式

由于getComputedStyle方法在IE浏览器中只兼容IE9及其以上,而IE8和它之前的浏览器则需要使用currentStyle方法来获取样式,所以我们就可以自定义一个getStyle方法来解决兼容性的问题

css实现文本底部添加下换线

最近在开发项目,针对小程序前端,显示文本需要添加下划线问题,起初是通过border-bottom:1rpx solid #eee; 进行编写,但是总是觉得线的高度过于粗,移动端最小单位值是 1 即:1rpx 1px,高度设置0.3是不生效的

Vue样式穿透

在开发中修改第三方组件样式是很常见,但由于 scoped 属性的样式隔离,可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用(组件样式污染、不够优雅)

如何用js修改css样式?

如何用js修改css样式?下面本篇文章就来给大家介绍一下使用javascript修改css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!