1:CSS3阴影 box-shadow的使用和技巧总结:

基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

box-shadow属性的参数设置取值:

阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;

X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;

Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;

阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。

2:实现多行文本超出显示…(火狐浏览器不支持)

display:-webkit-box
-webkit-line-camp:3;
-webkit-box-orient:vertical;

3:取消默认的高亮显示

 -webkit-tap-highlight-color:rgba(0,0,0,0);

4:消除手机端默认样式

-webkit-apperance:none;

5:css不显示滚动条

::-webkit-scrollbar{
width:;
}

6:before和after元素不设置content时会不显示。

7:设置或检索是否允许用户选中文本

user-select:none|text|all|element 
文本不能被选择 
none:

可以选择文本

text:

8:实现图片自适应的方式 
- 使用picture元素(H5新增) 
- 使用img的srcset,sizes属性

<picture>
<source srcset="a.png" media="(max-width:750px)"/>
<source srcset="b.png"/>
<img srcset="b.png"/>
</picture>

这个元素是有兼容性的,需要添加额外的插件

<script src="picturefill.js"></script>

<img src="a.png" srcset="a.png,b.png" sizes="(max-width:500px) 128px,256px"/>

上面这段代码的意思表示:不支持srcset属性时,使用src中的图片,否则浏览器会自动匹配最佳显示图片;sizes属性的值表示当可视区宽度不大于500像素,则图片宽度显示为128px,其他情况下,图片宽度显示为512px。

10: 文本最多显示3行,超出显示...

p{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
}

11:元素开启GPU硬件加速 
当页面中有动画效果时开启GPU硬件加速让浏览器在渲染动画时从CPU转向GPU,从而页面渲染速度,减少页面卡顿现象。 
开启硬件加速的方法

-webkit-transform: translate3d(0, 0, 0);
或者 transform:translateZ(0);

另外开启硬件加速后可能会导致页面频繁闪烁或者抖动可以尝试用一下方法解决 

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

12:-webkit-font-smoothing:设置字体的抗锯齿或者顺滑度。 
它有三个值:  
none —— 对小像素的文本比较好  
subpixel-antialiased ——默认值  
antialiased ——抗锯齿很好

13: pointer-events 
让a元素不可点击,后来才发现使用这个属性就可以做到

a[href="http://example.com"] {
pointer-events: none;
}
<li><a href="http://example.com">一个不能点击的链接</a></li>

14: css3下三角的实现

<div class="down-triangle"></div>
.down-triangle{
width:;
height:;
border-color: green;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid red;
}

15:css各个选择器优先级原则

!importan > 行内样式(style属性)> 内部样式(style标签)> 外部样式文件 
id > class(伪类选择器,属性选择器) > 元素选择器 > *

计算方式:

选择器的权重
id(100)
class = 属性选择器 = 伪类选择器(10)
元素选择器(1)
各个选择器的权重值相加,值越大,优先级越高。(值相等的时候,后定义的覆盖先定义的。)

常用的css3新特性总结的更多相关文章

  1. CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  2. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  3. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  4. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  5. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  6. 深入了解css3新特性

    深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

  7. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  8. css3新特性总结

    一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...

  9. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

随机推荐

  1. android android.mk中:= ?= +=之间的区别

    转自:http://blog.csdn.net/love_xsq/article/details/50395138 在Makefile中我们经常看到 = := ?= +=这几个赋值运算符,那么他们有什 ...

  2. log4j配置独立日志方法

    不使用类,而是使用loggerName来创建日志: #json是用java代码创建logger时用name,而不是jsonlog,注意,不需要在rootLogger中再配置,否则其它无关信息也将输出到 ...

  3. DRM Study

    1.DRM是什么? DRM,英文全称Digital Rights Management, 可以翻译为:数字版权管理.指的是出版者用来控制被保护对象的使用权的一些技术,这些技术保护的有数字化内容(例如: ...

  4. 如何在Word中排出漂亮的代码

    引言 学数学和计算机,当然还是用LaTeX排版技术文章更方便.但有时候还是迫不得已需要用Word写作,另外Word其实也有Word的好处,比如细节上的修改要比LaTeX方便. 从Matlab高亮代码复 ...

  5. 【Java】JAVA-加密-DES加密代码详解

    package util; import java.security.SecureRandom; import javax.crypto.spec.DESKeySpec; import javax.c ...

  6. 转: 解决【Unable to make the session state request to the session state server】

    错误描述: Unable to make the session state request to the session state server. Please ensure that the A ...

  7. TCP/IP协议详解---概述

        工作之后,才发现以前在学校里学的东西忘得太快太干净了,现在需要一点点地捡起来了,要不然写几行程序会闹很多笑话会出现很多bug的.从今天开始,翻一翻<TCP/IP协议详解 卷1>这本 ...

  8. 洛谷 P2261 [CQOI2007]余数求和 解题报告

    P2261 [CQOI2007]余数求和 题意: 求\(G(n,k)=\sum_{i=1}^n k \ mod \ i\) 数据范围: \(1 \le n,k \le 10^9\) \(G(n,k)\ ...

  9. Redis Scan迭代器遍历操作原理(二)

    续上一篇文章 Redis Scan迭代器遍历操作原理(一)–基础 ,这里着重讲一下dictScan函数的原理,其实也就是redis SCAN操作最有价值(也是最难懂的部分). 关于这个算法的源头,来自 ...

  10. 图像处理之Canny边缘检测

    http://blog.csdn.net/jia20003/article/details/41173767 图像处理之Canny 边缘检测 一:历史 Canny边缘检测算法是1986年有John F ...