精华内容
下载资源
问答
  • 解决css3兼容各个浏览器前缀的方案 emmet生成 用编辑器插件: 如sublime text 的 autoprefixer自动添加兼容前缀 基于nodejs 需要安装nodejs (这个效果不佳,本人测试貌似只添加-webkit-的前缀 - -) 用grunt插件 ...

    解决css3兼容各个浏览器的前缀的方案

    emmet生成
    用编辑器插件: 如sublime text 的  autoprefixer自动添加兼容前缀 基于nodejs 需要安装nodejs (这个效果不佳,本人测试貌似只添加-webkit-的前缀 - -)
    用grunt插件 grunt-autoprefixer 参考链接:http://www.w3cplus.com/css3/autoprefixer-css-vender-prefixes.html
    引入js<script src=”http://leaverou.github.com/prefixfree/prefixfree.min.js”></script>

    Webstorm中使用Autoprefixer插件补充浏览器前缀

    npm install grunt --save-dev
    npm install autoprefixer --save-dev
    npm install postcss-cli --save-dev

    打开Webstorm设置,Preferences -> Tools -> External Tools ;点击新增按钮
    填写具体配置
    name:autoprefixer
    Program:D:\mycode\driveRepertory\node_modules\.bin\postcss.cmd
    Parameters:-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$
    Working directory $ProjectFileDir$
    配置好后,你可以在css,或sass文件中右键,就可以在右键菜单中看到External Tools – autoprefixer;

    配置快捷键
    这里写图片描述

    配置兼容性
    https://github.com/postcss/autoprefixer
    https://github.com/browserslist/browserslist

    参考:
    https://blog.csdn.net/kongjiea/article/details/46471867

    展开全文
  • css针对各个浏览器前缀是什么: 现在写css3代码的时候,为了实现兼容性,需要在前面加前缀以便兼容对应的浏览器。 下面就列举一下前缀的写法: [code="java"]-webkit//Webkit内核,例如谷歌和Safari...
    [url]http://my.oschina.net/u/1468670/blog/613951[/url]
    

    css针对各个浏览器的前缀是什么:
    现在写css3代码的时候,为了实现兼容性,需要在前面加前缀以便兼容对应的浏览器。
    下面就列举一下前缀的写法:
    -webkit//Webkit内核,例如谷歌和Safari浏览器
    -moz//Gecko内核,例如火狐浏览器
    -o//Presto内核,例如Opera浏览器
    -ms//Trident内核,例如IE浏览器

    更多内容可以参阅:[url]http://www.softwhy.com/divcss/[/url]
    展开全文
  • 一、浏览器CSS属性前缀 前缀 对应浏览器 -webkit- chrome -moz- FireFox -ms- IE -o- Opera 二、CSS3圆角(border-radius) CSS3中我们可以使用 border-radius是下面四个属性的复合...

    一、浏览器CSS属性前缀

    前缀对应浏览器
    -webkit-chrome
    -moz-FireFox
    -ms-IE
    -o-Opera


    二、CSS3圆角(border-radius)

    CSS3中我们可以使用

    • border-radius是下面四个属性的复合属性
    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-right-radius
    • border-bottom-left-radius

    给元素添加圆角边框。

    语法

    border-raduis: px | % | em | vw | rem

    单位说明
    px像素
    em以父节点的字体像素为1em来计算
    rem以根目录的字体为1em来计算
    %%是相对于div的长和宽来说的,长方形设置为50%会是一个椭圆,正方形设置50%会是一个圆

    多值

    border-raduis可以有多少个值,每个值之间用空格隔开。

    • 四个值:左上 右上 右下 左下
    • 三个值:左上 右上左下(对角线) 右下
    • 两个值:左上右下(对角线) 右上左下(对角线)

    兼容

    IE9+、FireFox4+、chrome、Safari5+、Opera
    为了兼容各个浏览器建议使用前缀

    <style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #F00;
            margin: 30px auto;
            -webkit-border-radius: 20px 10px 60px;
               -moz-border-radius: 20px 10px 60px;
                -ms-border-radius: 20px 10px 60px;
                 -o-border-radius: 20px 10px 60px;
                    border-radius: 20px 10px 60px;
        }
    </style>


    案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>圆角</title>
        <style>
            div.alive{
                width: 600px;
                height: 300px;
                border: 2px solid #F00;
                margin: 30px auto;
                -webkit-border-radius: 50%;
                   -moz-border-radius: 50%;
                    -ms-border-radius: 50%;
                     -o-border-radius: 50%;
                        border-radius: 50%;
                font-size: 24px;
                font-weight: bold;
                text-align: center;
                line-height: 300px;
                position: relative;
            }
            div.alive::before,
            div.alive::after{
                content: "";
                display: block;
                position: absolute;
                border: 2px solid #F00;
                -webkit-border-radius: 50%;
                   -moz-border-radius: 50%;
                    -ms-border-radius: 50%;
                     -o-border-radius: 50%;
                        border-radius: 50%;
            }
            div.alive::before{
                bottom: -50px;
                right: 20px;
                width: 50px;
                height: 50px;
            }
            div.alive::after{
                bottom: -100px;
                right: 0px;
                width: 20px;
                height: 20px;
            }
        </style>
    </head>
    <body>
        <div class="alive">苟利国家生死以!我真的还想再活500年!</div>
    </body>
    </html>

    这里写图片描述


    三、CSS3盒阴影(box-shadow)

    box-shawow属性可以设置一个或多个下拉阴影的框

    语法

    box-shadow: h-shadow v-shadow blur spread color inset;
    说明
    h-shadow必需的。水平阴影的偏移位置。允许负值(正值:向右偏移,负值:向左偏移)
    v-shadow必需的。垂直阴影的偏移位置。允许负值(正值:向下偏移,负值:向上偏移)
    blur可选。边缘模糊距离(就是从透明到背景色的颜色过渡的距离)
    spread可选。阴影的大小(默认(0 )的阴影大小就是元素本身的大小,设置该值会增大阴影)
    color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
    inset(值就为inset)可选。将阴影设置为盒内阴影。

    兼容性

    IE9+、FireFox4+、Chrome、Safari5+、Opera

    案例1

    </html>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
        <title>伪元素</title>
        <style type="text/css">
            div{
                width: 500px;
                height: 300px;
                background-color: #F00;
                margin: 100px auto;
                box-shadow: 0 0 30px 30px #FFF inset; 
                background: url(./img/timg2.jpg) no-repeat center center;
            }
        </style>
    </head>
    <body>
        <div>
    
        </div>
    </body>
    </html>

    这里写图片描述

    案例2

    </html>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
        <title>伪元素</title>
        <style type="text/css">
            div{
                width: 500px;
                height: 300px;
                background-color: #F00;
                margin: 100px auto;
                box-shadow: 30px 30px yellow; 
            }
        </style>
    </head>
    <body>
        <div>
    
        </div>
    </body>
    </html>
    

    这里写图片描述

    四、CSS3边框图片(border-image)

    语法

    border-image:source slice width outset repeat;

    兼容

    不兼容IE、FireFox、Chrome、Safari6+、Opera不兼容

    属性说明
    border-image-source:none|image;
    border-image-slice:number|%|fill指定图像的边界向内偏移
    border-image-width:number|%|auto指定图像边界的宽度
    border-image-outset:length|number指定边框外部绘制border-image-area的量
    border-image-repeat:stretch(默认值)|repeat|round|initial(默认)|inherit(继承)图像边界是否重复(repeated)、拉伸(stretched)、铺满(rounded)
    展开全文
  • webpack打包时,css自动添加浏览器前缀。我们需要用到一个Loader:postcss-loader,和一个插件:autoprefixer 安装 npm i postcss-loader autoprefixer -D 方法一 1.在webpack.config.js文件中,找到...

    webpack打包时,css自动添加浏览器前缀。我们需要用到一个Loader:postcss-loader,和一个插件:autoprefixer

     

    安装

    npm i postcss-loader autoprefixer -D

     

    方法一

    1.在webpack.config.js文件中,找到module下的rules属性,在里面添加一个对象,完整代码如下:

    module:{
            rules:[
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader','postcss-loader']
                }
            ]
        }

    代码中,还有另外3个loader,因为use调用loader的顺序是从右往左的,所以顺序不能写错了,webpack打包.scss时,首先会调用postcss-loader为其添加浏览器前缀,(因为我代码中用了sass,所以引入了sass-loader),当浏览器前缀添加完后,sass-loader会把sass语法转换成css语法,在代码中,一般会有多个css文件,然而css-loader会将css文件整合成一段代码,这时,style-loader就会将这段代码,添加到页面的style标签中。

     

    如果用的普通css,安装下面两个就行:

    npm i style-loader css-loader -D

     

    如果用的sass,需要安装如下依赖包:

    npm i style-loader css-loader sass-loader node-sass -D

     

    2.在webpack.config.js文件同级目录中,新建postcss.config.js文件,并且添加如下代码:

    module.exports = {
        plugins:[
            require('autoprefixer')
        ]
    }

     

    配置完,直接打包运行即可。

     

    方法二

    直接把autoprefixer配置在postcss-loader里面

    module:{
            rules:[
                {
                    test:/\.scss$/,
                    use:[
                        {loader:'style-loader'},//将css-loader整合在一起的代码,放在页面中的style标签里面
                        {loader:'css-loader'},//将各个css文件整合在一起 
                        {loader:'sass-loader'},//将sass语法解析成css
                        {
                            loader:'postcss-loader',
                            options:{
                                plugins:[
                                    require('autoprefixer')//postcss-loader会叫autoprefixer插件添加浏览器前缀
                                ]
                            }
                        }
                    ]
                }
            ]
        }

     

    style-loader、 css-loader、 sass-loader的更多的用法,可自行去webpack官网查阅文档。 灰机直达

    这里有个坑,一开始安装的autoprefixer版本是9.x的,但是配置后没有效果,之后换成7.x的就可以了。

    转载于:https://www.cnblogs.com/Mrrabbit/p/11202631.html

    展开全文
  • 前缀  浏览器 -webkit- chrome、safari -moz- Firefox -ms- IE -o- opero 转载于:https://www.cnblogs.com/lixilin/articles/7873355.html
  • 解决css3兼容各个浏览器前缀

    千次阅读 2015-06-12 15:17:33
    1、emmet生成 2、用编辑器插件: 如...自动添加兼容前缀 基于nodejs 需要安装nodejs 3、用grunt插件 grunt-autoprefixer 参考链接:http://www.w3cplus.com/css3/autoprefixer-css-vender-prefixes.html 4、引入js
  • CSS兼容各个浏览器

    千次阅读 2019-05-15 10:35:35
    css兼容浏览器代码设置 /* 简单属性 */ .myClass { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; -ms-animation-name: fadeIn; animation-name: fadeIn; /* 不带...
  • 当一个浏览器实现一个新的属性、值或者选择器,而这个特征还不是处于候选推荐标准状态的时候,这属性的前面会添加一个前缀以便于它的渲染引擎识别。 浏览器使用前缀来尝试一些新属性、值和选择器,即使他们还没有...
  • 有一些css属性是还没有全面支持,各个浏览器内核各做各的,所以想要兼容各个浏览器,就需要给这些属性加一个前缀,表明兼容火狐/谷歌/IE/欧朋内核 假如ababa属性, -moz-ababa:18px; //在火狐中肯定能用 -webkit-...
  • css3中浏览器厂商前缀

    千次阅读 2015-06-09 13:46:02
    css标准中各个属性也要经历从草案(WD)到推荐(REC)的过程,css中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险,同时也会出现有的浏览器厂商支持的好,有的支持的不好,所以就用厂商前缀加以...
  • 前缀 浏览器 -moz- 火狐等使用Mozilla浏览器引擎的浏览器 -webkit- Safari, 谷歌浏览器等使用Webkit引擎的浏览器 -o- Opera浏览器(早期)
  • 出现浏览器兼容问题的原因: ...再加上各大厂商出于自身利益考虑而设置的种种技术壁垒,都让CSS应用起来比想象得要麻烦。 五大浏览器:  Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera。 ...
  • 浏览器的内核: IE——trident Opera——Blink(presto已废弃) ...css为了兼容各个主流浏览器,有一些浏览器特有的属性需要加上前缀,否则识别不了 IE—— -ms- Opera—— -o- Chrome和Safari—— -webk...
  • 关于浏览器前缀

    2019-06-20 17:33:46
    关于浏览器前缀题引概念定义函数调用总结 题引 参考:《css揭秘》《WebKit技术内幕》 -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; border-radius: ...
  • 浏览器内核及css前缀

    2021-07-30 17:32:45
    CSS标准中各个属性都要经历从草案到推荐的过程,css3中的属性进展都不一样,浏览器厂商在标准尚未明确的情况下提前支持会有风险,浏览器厂商对新属性的支持情况也不同,所以会加厂商前缀加以区分。如果摸个属性已经...
  • webpack 配置postCSS 自动添加css兼容前缀2020年10月24日|萬仟网IT编程 |我要评论不同浏览器对CSS的兼容性是不同的,之前想要做到css样式在各个浏览器都兼容需要在css代码中手动加上前缀,现在前端工程化即可实现...
  •  由于不同厂商的浏览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器 的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果...
  • 浏览器的兼容性问题是... 浏览器CSS样式初始化由于每个浏览器css默认样式不尽相同,所以最简单有效的方式就是对其进行初始化,相信很多朋友都写过这样的代码,在所有CSS开始前,先把marin和padding都设为0,以防...
  • 今天的移动平台被基于WebKit的浏览器统治着,WebKit使用了大量非标准的-webkit前缀CSS属性或特性,这些CSS属性被Web开发者广泛使用,导致的结果是市场占有率较小的浏览器不得不支持这些非标准特性。 WebKit前缀...
  • 1、使用Trident内核的浏览器:IE、Maxthon、TT、The World等; 2、使用Gecko内核的浏览器:Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey; 3、使用Presto内核的浏览器:Opera7及以上版本; 4、使用Webkit...
  • 不同浏览器对CSS的兼容性是不同的,之前想要做到css样式在各个浏览器都兼容需要在css代码中手动加上前缀,现在前端工程化即可实现 自动添加前缀方法: webpack中配置postCSS 自动添加css兼容前缀 步骤: 1.安装 ...
  • 需要兼容各浏览要注意的是:必须加上浏览器的私有前缀。否则一般都是不生效的,浏览器的私有前缀主要是解决不同浏览器的兼容性问题 webkit 谷歌浏览器 安卓 moz 火狐浏览器 o opera浏览器 ms ie浏览器 首先来个...
  • div{ width: 100px; height: 100px; background-color: red; -webkit-border-radius: 50px;/*针对谷歌和苹果浏览器*/ -o-border-radius: 20px;/*针对欧朋浏览器*/
  • -webkit :表示对safari苹果浏览器与chrome谷歌浏览器的支持-ms :表示对IE浏览器的支持-o :表示对opera浏览器的支持-moz :表示对firefox火狐浏览器的支持那么如果一个css属性想要兼容各个浏览器,该如何做呢?...
  • css浏览器兼容

    2020-10-29 17:48:21
    由于各个浏览器使用的内核不一致,导致css解析也有些不同,下面分享一些浏览器兼容写法 前缀 -webkit- ,针对safari,chrome浏览器的内核CSS写法 -moz-,针对firefox浏览器的内核CSS写法 -ms-,针对ie内核的CSS写法 ...
  • Css3动画浏览器兼容问题

    千次阅读 2019-03-26 16:39:07
    css发展的过程中,当一些新得css属性刚出来的时候,还没有成为业界认可的标准(有可能永远都不会成为标准),于是各个浏览器开发者选择采用一些用于自己测试的属性,这些属性只在自己所开发的浏览器上被支持,而在...
  • 背景介绍 在 Web 应用开发中,CSS ...不过与其他 Web 领域的规范相似的处境是,CSS 规范在浏览器兼容性方面一直存在各种各样的问题。不同浏览器CSS 规范的实现方面的进度也存在很大差异。另外,CSS 规范本身的发...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,113
精华内容 3,645
关键字:

css各个浏览器前缀