PC常见CSS效果锦集 - 01
博客专区 > Jia。 的博客 > 博客详情
PC常见CSS效果锦集 - 01
Jia。 发表于1年前
PC常见CSS效果锦集 - 01
  • 发表于 1年前
  • 阅读 4
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

各个主流浏览器内核

  • 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是蓝色值。

共有 人打赏支持
粉丝 0
博文 4
码字总数 1627
×
Jia。
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: