文档章节

PC常见CSS效果锦集 - 01

J
 Jia。
发布于 2016/12/11 22:04
字数 306
阅读 6
收藏 1

各个主流浏览器内核

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

© 著作权归作者所有

共有 人打赏支持
J
粉丝 0
博文 4
码字总数 1627
作品 0
深圳
前端工程师
私信 提问
CSS实现水平垂直居中的10种方式(史上最全)

划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将...

颜海镜
09/13
0
0
PC HTML5 前端开发

1、3年以上前端开发经验,熟练掌握HTML、CSS、JavaScript,有充足的时间开发。 希望使用的前端框架:jquery、bootstrap 希望使用的前端依赖管理工具:yarn 希望使用的IDE:IDEA 项目中引用的...

mymbrooks
2017/09/04
5
0
PC 前端页面开发

1、3年以上前端开发经验,熟练掌握HTML、CSS、JavaScript,有充足的时间开发。 希望使用的前端框架:jquery、bootstrap 希望使用的前端依赖管理工具:yarn 希望使用的IDE:IDEA 项目中引用的...

mymbrooks
2017/09/04
6
0
UI设计师/前端开发工程师 招聘

职位描述 1、负责PC端、负责Html5网站及移动端Web App开发; 2、Html5网站系统的性能稳定和优化升级; 3、为产品后期运营提供升级、维护等技术支持。 4.与后台开发工程师协作,完成各种数据交...

mahb520
2016/08/01
61
1
Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie
2017/12/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部