1.新增选择器

 E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:first-of-type
E:only-child
E:only-of-type
E:empty
E:checked
E:enabled
E:disabled
E::selection
E:not(s) 2.Font-face 特性
Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。 3.Word-wrap & Text-overflow 样式
word-wrap:允许长单词或 URL 地址换行到下一行。
text-overflow:规定当文本溢出包含元素时发生的事情。 4.文字渲染(Text-decoration)

Text-fill-color: 文字内部填充颜色

Text-stroke-color: 文字边界填充颜色

Text-stroke-width: 文字边界宽度

5.多列布局(multi-column layout)

Column-count:表示布局几列。

Column-rule:表示列与列之间的间隔条的样式

Column-gap:表示列于列之间的间隔

6.边框和颜色(color, border)
css3提供支持颜色和HSL的透明度、圆角 7.渐变效果(Gradient)
  线性渐变、径向渐变

8.阴影(Shadow)和反射(Reflect)效果
阴影效果:text-shadow 、box-shadow
反射:box-reflect 9.CSS3 的背景效果

* background-clip: border-box; 背景从 border 开始显示 ;

* background-clip: padding-box; 背景从 padding 开始显示 ;

* background-clip: content-box; 背景显 content 区域开始显示 ;

* background-clip: no-clip; 默认属性,等同于 border-box;

“Background Origin”,用于确定背景的位置,它通常与 background-position 联合使用

* background-origin: border-box; 从 border. 开始计算 background-position;

* background-origin: padding-box; 从 padding. 开始计算 background-position;

* background-origin: content-box; 从 content. 开始计算 background-position;


“Background Size”,常用来调整背景图片的大小,注意别和 clip 弄混,这个主要用于设定图片本身。有以下可能的属性:

* background-size: contain; 缩小图片以适合元素(维持像素长宽比)

* background-size: cover; 扩展元素以填补元素(维持像素长宽比)

* background-size: 100px 100px; 缩小图片至指定的大小 .

* background-size: 50% 100%; 缩小图片至指定的大小,百分比是相对包 含元素的尺寸 .

“Background Break”属性,CSS3 中,元素可以被分成几个独立的盒子(如使内联元素 span 跨越多行),background-break 属性用来控制背景怎样在这些不同的盒子中显示。

* background-break: continuous; 默认值。忽略盒之间的距离(也就是像元 素没有分成多个盒子,依然是一个整体一 样)

* background-break: bounding-box; 把盒之间的距离计算在内;

* background-break: each-box; 为每个盒子单独重绘背景。

10.盒子模型

      一种非常灵活的布局方式,但是支持这一特性的浏览器并不多,目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox。

11.Transitions, Transforms 和 Animation、Transitions

transition-property:用于指定过渡的性质,比如 transition-property:backgrond 就是指 backgound 参与这个过渡

transition-duration:用于指定这个过渡的持续时间

transition-delay:用于制定延迟过渡的时间

transition-timing-function:用于指定过渡类型,有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

												

前端小知识~~关于css3新增知识~~归纳总结的更多相关文章

  1. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  2. 微信小程序必知相关知识

    微信小程序必知相关知识 1 请谈谈微信小程序主要目录和文件的作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验: App.js 设置一些全局的基础数 ...

  3. CSS3 基础知识

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  4. CSS3 基础知识[转载minsong的博客]

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  5. HTML5培训入门基础知识了解CSS3 3D属性

    CSS3 3D 什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 CSS3中的 ...

  6. [面试专题]前端需要知道的web安全知识

    前端需要知道的web安全知识 标签(空格分隔): 未分类 安全 [Doc] Crypto (加密) [Doc] TLS/SSL [Doc] HTTPS [Point] XSS [Point] CSRF ...

  7. 【论文小综】基于外部知识的VQA(视觉问答)

    ​ 我们生活在一个多模态的世界中.视觉的捕捉与理解,知识的学习与感知,语言的交流与表达,诸多方面的信息促进着我们对于世界的认知.作为多模态领域的一个典型场景,VQA旨在结合视觉的信息来回答所提出的问题 ...

  8. 利用css3新增选择器制作背景切换

    之前写css3的时间都是捡项目需要的来用,没有系统的学习过,这几天好好的补了一下css3的知识,真的获益匪浅!觉得新增的那些选择器是有用至极的!今天就来所这几天的所学做一个点击标签切换背景的效果,是纯 ...

  9. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

随机推荐

  1. JS验证只能输入数字,数字和字母等的正则表达式

    JS判断只能是数字和小数点 0.不能输入中文1)<input onpaste="return false;" type="text" name=" ...

  2. epoll & socket 连接数突破

    http://shenfeng.me/how-far-epoll-can-push-concurrent-socket-connection.html

  3. JSTL 操作符

    el表达式的取值默认顺序:     pageScope  requestScope  sessionScope  applicationScope     结构,采用.导航,也称为存取器   ${us ...

  4. iOS 局部变量 全局变量 成员变量

    一.成员变量 : 写在类声明的大括号中的变量叫成员变量 (也叫属性/实例变量) 成员变量不可离开类 离开了类就不是成员变量 成员变量不能再定义的同事初始化 成员量只能通过对象来访问 成员变量存储在堆中 ...

  5. memcache的内存管理探微

    slab分配器:http://blog.csdn.net/luotuo44/article/details/42737181 hash操作  :http://blog.csdn.net/luotuo4 ...

  6. 461. Hamming Distance and 477. Total Hamming Distance in Python

    题目: The Hamming distance between two integers is the number of positions at which the corresponding ...

  7. express框架

    一.express的使用 安装express 在根目录下输入 npm install express 引入express的包 const express = require("express ...

  8. Android语录

    1. application对象的生命周期是整个程序中最长的,它的生命周期就等于这个程序的生命周期.因为它是全局的单例的,所以在不同的Activity,Service中获得的对象都是同一个对象.因此在 ...

  9. js打印对象数组信息

    function writeObj(obj){ var description = ""; for(var i in obj){ var property=obj[i]; desc ...

  10. hdu 2222 Keywords Search

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=2222 思路:裸AC自动机,直接贴代码做模板 #include<stdio.h> #includ ...