PC常见CSS效果锦集

各个主流浏览器内核

IE: Trident
Safari: webkit 内核
Opera: 以前是presto 内核，现在改用Google Chrome 的Blink内核
Chrome: Blink(基于webkit,Google与Opera Software 共同开发)
360: 双内核（极速模式：webkit，兼容模式：Trident；）
Firefox: Geoko

常见的css效果

文本多行溢出

css 代码实现

            display: -webkit-box !important;
            overflow: hidden;

            text-overflow: ellipsis;
            word-break: break-all;

            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;

经过测试，在Google、Opera、360极速模式下正常显示，IE、Firefox、360兼容模式下没有效果，还需要使用height来限制内容高度

文本单行溢出

css 代码实现


            overflow: hidden;

            white-space: nowrap;

            text-overflow: ellipsis;

Google、Opera、360、IE、Firefox都正常显示

背景透明

raba(90,183,232,.6)
经过测试，Google、Firefox、Opera、360极速模式都可以正常显示透明度，IE8和360兼容模式(IE8)不能够正常显示透明度
opacity= 0.6
经过测试，oogle、Firefox、Opera、360极速模式都可以正常显示透明度，IE8和360兼容模式(IE8)不能够正常显示透明度
解决IE8下背景透明问题

filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#cc12485d',endColorstr='#cc12485')

以颜色值 #FF99CC00 为例，其中，FF是透明度，99是红色值， CC是绿色值， 00是蓝色值。

来源：oschina

链接：https://my.oschina.net/u/3094219/blog/804189

标签

css

透明度css

opera浏览器

webkit