文档章节

PC常见CSS效果锦集 - 01

J
 Jia。
发布于 2016/12/11 22:04
字数 306
阅读 4
收藏 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
Bootstrap 响应式项目分享一

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

Neuro_annie
2017/12/27
0
0
快切响应式 css 框架发布 v1.4 版本

快切开源响应式css框架发布v1.4版本,新增了计数器counter组件!更改了网站主色调为#698绿色,新增css3图片移上去放大类img-scale,修正了导航naver的响应式bug及增加了css3动画效果,增加了...

qietuwang
2015/07/12
2.5K
10
UI设计师/前端开发工程师 招聘

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

mahb520
2016/08/01
61
1
史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp
2017/01/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7防火墙firewalld操作

firewalld Linux上新用的防火墙软件,跟iptables差不多的工具。 firewall-cmd 是 firewalld 的字符界面管理工具,firewalld是CentOS7的一大特性,最大的好处有两个:支持动态更新,不用重启服...

dingdayu
今天
1
0
关于组件化的最初步

一个工程可能会有多个版本,有国际版、国内版、还有针对各种不同的渠道化的打包版本、这个属于我们日常经常见到的打包差异化版本需求。 而对于工程的开发,比如以前的公司,分成了有三大块业...

DannyCoder
今天
2
0
Spring的Resttemplate发送带header的post请求

private HttpHeaders getJsonHeader() { HttpHeaders headers = new HttpHeaders(); MediaType type = MediaType.parseMediaType("application/json; charset=UTF-8"); ......

qiang123
昨天
3
0
Spring Cloud Gateway 之 Only one connection receive subscriber allowed

都说Spring Cloud Gateway好,我也来试试,可是配置了总是报下面这个错误: java.lang.IllegalStateException: Only one connection receive subscriber allowed. 困扰了我几天的问题,原来...

ThinkGem
昨天
28
0
学习设计模式——观察者模式

1. 认识观察者模式 1. 定义:定义对象之间一种一对多的依赖关系,当一个对象状态发生变化时,依赖该对象的其他对象都会得到通知并进行相应的变化。 2. 组织结构: Subject:目标对象类,会被...

江左煤郎
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部