css3样式前缀：-ms -moz -webkit -o

最新推荐文章于 2025-06-17 03:24:13 发布

OrangeJuiceMe

最新推荐文章于 2025-06-17 03:24:13 发布

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css css3 web前端文章标签： css css3 浏览器前缀浏览器兼容性标准

本文链接：https://blog.youkuaiyun.com/OrangeJuiceMe/article/details/50489132

web前端同时被 3 个专栏收录

7 篇文章

订阅专栏

css

4 篇文章

订阅专栏

css3

2 篇文章

订阅专栏

本文介绍了如何通过添加特定前缀来确保CSS3代码能在不同浏览器中正确显示，包括Firefox、Chrome、IE和Opera等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

w3c发布了CSS3标准，但是各大主流浏览器并没有完全遵循这个标准，都有自己的实现。所以在实现某一效果时，为了让网页在各浏览器中都能被识别，常常需要写多行前缀不一样，属性一样的代码。

-moz Firefox浏览器

-webkit Chrome、Safari

-ms IE浏览器

-o Opera

例如对元素的2D转换：

transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */

所以除了写上w3c标准语句外，还需要带上想要支持的浏览器的前缀。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

OrangeJuiceMe

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS3

郭宝的博客

06-26

243

CSS3是什么？ CSS3是CSS2的升级版本，它是用于控制网页的样式和布局，3只是版本号，目前主流的Chrome、safari、firefox、opera、IE10+浏览器都支持CSS3。在CSS3样式时，不同的浏览器可能需要不同的前缀，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的兼容还是少不了的。前缀 浏览器 ...

-ms-,-moz-,-webkit-,-o-含义及各浏览器内核整理

weixin_45856470的博客

05-12

772

这种方式在业界上统称：识别码、前缀 //-ms代表【ie】内核识别码 //-moz代表火狐【firefox】内核识别码 //-webkit代表谷歌【chrome】/苹果【safari】内核识别码 //-o代表欧朋【opera】内核识别码为什么要加识别码：在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性, 目前已有很多私有前缀可以不写了，但为了兼容

参与评论您还未登录，请先登录后发表或查看评论

Safari参考样式库之webkit

小晖Allen的专栏

09-09

2463

Safari参考样式库之webkit支持CSS属性Safari和WebKit实施大子的CSS 2.1规格所界定的万维网联盟（ W3C ），以及部分的CSS 3规格。。这个CSS属性本条划分的群体界定由W3C的CSS规格：*“盒模型”的具体描述性质的包围盒块内容，包括边界，填充，和利润率。附加框相关属性的特定表中分别介绍了“表。 ”*“视觉格式化模型”描述性质，确定了位置和大小的块元素。*“视觉效果”描述属性，调整的视觉效果块内容，包括溢出行为，调整行为，能见度，动画，变换，和过渡。*“生成的内容，自动编

CSS3 背景裁剪：background-clip 的创意用法

最新发布

小白菜的博客

06-17

1498

本文旨在帮助前端开发者和设计师彻底掌握的核心用法，不仅讲解基础概念，更重点拆解其在文字特效、边框设计、不规则图形等场景中的创意应用。无论您是 CSS 新手还是资深工程师，都能从中找到启发。本文将按照“基础原理→核心概念→创意用法→实战案例→注意事项”的逻辑展开，先通过生活比喻建立直观认知，再结合代码和效果演示具体操作，最后总结常见问题和未来趋势。背景裁剪（Background Clipping）：控制背景图像或颜色显示范围的技术，超出裁剪区域的部分会被隐藏。CSS 盒子模型（Box Model）

CSS3前缀

weixin_30468137的博客

07-17

152

我们经常会遇到写的有些css3属性会在不同的浏览器下呈现不兼容的情况，那是因为浏览器内核不同而导致的兼容性问题。首先我们需要先了解一下目前的几种现代浏览器的内核，主流内容主要有Mozilla（熟悉的有Firefox浏览器），WebKit（熟悉的有Chrome，Safari等浏览器），Trident（IE浏览器）， CSS3的前缀是一个浏览器内核常使用的一种方式。它暗示该CSS属性...

CSS3中的前缀

lkl713的专栏

02-11

1207

CSS3的前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。看看都有哪些前缀： -webkit Webkit内核(Chrome/Safari) -moz Gecko内核(火狐浏览器) -ms Trident内核(IE浏览器) -o Presto内核(Opera)

关于CSS3样式中的前缀问题

09-01

299

作为新手，有的时候在写css时分不清什么属性需要用到前缀，或者用什么前缀，下面是我平时学习的一些总结。在了解这些前缀之前，先介绍一下各大主流浏览器的内核： IE——trident（国内很多双核浏览器的其中一核就是trident） Opera——Blink（presto已废弃） chrome——Blink（之前是webkit） Firefox——Gecko Safari...

#book-zoom{ -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -ms-transition: -ms-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; }

07-20

这些前缀包括 `-webkit-`、`-moz-`、`-ms-` 和 `-o-`。 - `-webkit-transition`：这是 WebKit 内核浏览器（如 Chrome 和 Safari）使用的过渡属性。`-webkit-transform` 表示在过渡期间应用的变换效果。 - `-moz-...

``` display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; ```注释

05-23

这是一段CSS代码，它定义了一个元素的布局方式。这个元素使用了flex布局，其中包括了几个浏览器前缀，以保证在不同的浏览器上都能够正确地显示。其中各个浏览器前缀的意义如下： -ms-flexbox：适用于IE10以上的...

css 让文字不被选中之-moz-user-select 属性介绍

09-25

为了实现跨浏览器兼容性，你可能还需要使用其他前缀，如 `-webkit-user-select`（针对 WebKit/Safari/Chrome）和 `-ms-user-select`（针对 Internet Explorer）。在某些情况下，即使设置了 `-moz-user-select: ...

css 区分浏览器 "-webkit-"、"-moz-"、"-o-"、"-ms-"

06-11

以下是对 `-webkit-`、`-moz-`、`-o-` 和 `-ms-` 的详细解释及其用法[^1]。 #### 1. 厂商前缀的基本概念厂商前缀用于在 CSS 中定义特定浏览器的功能。这些前缀允许开发者在标准特性未被广泛支持时，仍然可以使用...

CSS 前缀

勇敢阿呆的部落阁

08-01

707

主流浏览器引擎前缀: -webkit- (谷歌, Safari, 新版Opera浏览器, 以及几乎所有iOS系统中的浏览器(包括iOS 系统中的火狐浏览器); 简单的说，所有基于WebKit 内核的浏览器) -moz- (火狐浏览器) -o- (旧版Opera浏览器) -ms- (IE浏览器和 Edge浏览器) 示例: -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease;

css3 transform transition css3 前缀

荧光之烛

06-02

1488

transform 参数 div{ transform:rotate(7deg) translate(10px,10px) scale(2); -ms-transform:rotate(7deg) translate(10px,10px) scale(2); /* IE 9 */ -moz-transform:rotate(7deg) translate(10px,1...

day7小结

KanaseKanon的博客

09-24

899

1、CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。 2、CSS3的主要新特性： 1）选择器 2）阴影 3）形状转换（2D<->3D） 4）变形 5）动画（过渡动画、帧动画） 6）边框 7）多重背景 8）反射 9）文字 10）颜色（rgba/hsl/hsla） 11）滤镜（filter） 12）弹性布局 13）多列布局 14）盒模型 15）Web字体 16）媒体查询 3、CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。 1）主流浏览器内

css3

2197

08-08

231

1)动画 1.Animation 1>属性 animation-name:指定选用的动画的名字，即keyframes中的NAME。 animation-duration:动画效果持续的时间，秒。 animation-timing-function：过渡类型 linear 匀速|ease 缓存|ease-in 加速|ease-out 减速| ease-in-out 先加速后减速 ...