面临找工作之际，又将CSS3的基础知识撸了一把，做了相应的笔记，主要是方便自己查阅，参考的是W3C的知识。
1、CSS背景
（1）、background-size 属性
background-size 属性规定背景图片的尺寸，同时适用与字体图标方面的适用（主要在移动端用到较多）。
在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
（2）、background-origin 属性
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域
（3）、background-clip 属性
background-clip看似跟background-origin的用法差不多，在W3C上面也没有找到对这两个属性的区别方面的解释。但是其中肯定是有不同之处，如果有两个属性的功能是完全一样的，明显是毫无意义的，通过谷歌了一下，主要总结如下：
两者重要的区别就是：背景能不能在边框上显示
background-clip：border|padding|content
该属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。（背景能在边框上显示）
background-origin：padding|border|content
该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置，你可以用这个属性在边框上绘制背景，但边框上的背景显不显示出来那就要由background-clip来决定了，（背景并没有在边框上显示）
如果还是不是很明白的童鞋，具体可以参考该大神的博客分享，里面的解析比较清晰明了，链接是：http://www.cnblogs.com/2050/archive/2012/11/13/2768289.html
2、CSS3 文本效果
（1） 文本阴影 text-shadow
通过代码例子进行理解，主要代码如下：
<style>
h1 {
text-shadow: 5px 5px 5px #FF0000; }
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
（2）CSS3 自动换行
（3）、CSS3 字体
在了解CSS3字体之前，需要了解一下CSS字体的发展史，在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：
代码如下：
<style>
@font-face {
font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
,url('/example/css3/Sansation_Light.eot'); /* IE9+ */ }
div { font-family:myFirstFont; }
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
效果图如下：
如果要使得变为粗体：
@font-face {
font-family: myFirstFont;
src: url('/example/css3/Sansation_Bold.ttf')
,url('/example/css3/Sansation_Bold.eot'); /* IE9+ */
font-weight:bold; }
div { font-family:myFirstFont; }
</style>
</head>
<body>
<div>
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>
效果图如下：
3、CSS3 2D 转换
（1）translate() 方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
效果图如下：
如果没有设置样式div#div2，则是：
设置了设置样式div#div2，则是水平方向向右移动了50px,垂直方向向下移动了100px：（参考的方向点是图像的左上角）
（2）rotate() 方法
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
红色标记部分代表是旋转的角度，（30度）
（3）scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
红色部分是倍数。
(4)skew() 方法
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
(5)matrix() 方法
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
<style>
div {
width:100px;
height:75px;
border:1px solid black; }
div#div2 {
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
效果图如下：
注意： Opera 仍然不支持 3D 转换（它只支持 2D 转换）。
4、CSS3 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
实例
规定当鼠标指针悬浮于 <div> 元素上时：
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover { width:300px; }
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>
鼠标尚未移动到div里时，如下显示：
鼠标移动到div里时，效果如下：
.png)
5、CSS3 动画
<style>
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
效果是：该div在5S的时间里，将一开始的红色背景，逐渐的变成黄色背景。
例子2：
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
效果是：5S的时间被平均分成了四个时间点1.25,2.50，3.75,5.00，各个时间点对应着变成红色、黄色、蓝色、绿色。
6、CSS3 多列
（1）CSS3 创建多列
column-count 属性规定元素应该被分隔的列数：
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
<div class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元
</div>
效果图如下：
（2）CSS3 规定列之间的间隔
column-gap 属性规定列之间的间隔：
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}
</style>
</head>
<body>
<div class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
</div>
效果图如下：
（3）CSS3 列规则
column-rule 属性设置列之间的宽度、样式和颜色规则。
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff0000; /* Firefox */
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
column-rule:4px outset #ff0000;
}
</style>
</head>
<body>
<div class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
</div>
效果图如下：
以上都是我自己做的笔记，主要是参考W3C，都是按照自己方便记忆跟理解做成的笔记，相对而言，没那么完美，望笑纳，第一次发表博文。
.png)
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- （近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备
作者 | Jeskson 来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变, ...
- fastclick 源码注解及一些基础知识点
在移动端,网页上的点击穿透问题导致了非常糟糕的用户体验.那么该如何解决这个问题呢? 问题产生的原因 移动端浏览器的点击事件存在300ms的延迟执行,这个延迟是由于移动端需要通过在这个时间段用户是否两次 ...
- .NET基础知识点
.NET基础知识点 l .Net平台 .Net FrameWork框架 l .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转 l 两种交 ...
- JavaScript 开发者经常忽略或误用的七个基础知识点(转)
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- JavaScript 开发者经常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- JavaScript开发者常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- JavaScript语言基础知识点图示（转）
一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运算符 4.JavaScript 数组 5.Ja ...
- JavaScript 语言基础知识点总结
网上找到的一份JavaScript 语言基础知识点总结,还不错,挺全面的. (来自:http://t.cn/zjbXMmi @刘巍峰 分享 )
随机推荐
- android 物理按键 监听
android连接了一个4x4的矩阵键盘,linux内核中注册了按键,在app中监听键盘事件. package com.example.tony.keydemo; import android.sup ...
- IOS数据库操作SQLite3使用详解(转)
iPhone中支持通过sqlite3来访问iPhone本地的数据库.具体使用方法如下1:添加开发包libsqlite3.0.dylib首先是设置项目文件,在项目中添加iPhone版的sqlite3的数 ...
- [DP之多重背包优化方法]
首先我们看一道有趣的题目 然后这道题很快想到是一个多重背包和无限背包混合体 那么我们就以这道题 来讨论一下多重背包的优化 首先我们看看朴素打法 memset(F,,]=; ;i<=N;i++) ...
- python 数据清洗之字符串处理
在数据分析中,特别是文本分析中,字符处理需要耗费极大的精力, 因而了解字符处理对于数据分析而言,也是一项很重要的能力. 字符串处理方法 首先我们先了解下都有哪些基础方法 首先我们了解下字符串的拆分sp ...
- chap1 C++泛型技术基础--模板 #STL
0 缘起 有一点编程经验和积累,想系统的学习下STL,以前都是随意做的笔记,现在想着成主题的输出一下. 书的原型是ISBN:9787302421757 <C++泛型STL原理和应用>,是从 ...
- Unity启动事件-监听:InitializeOnLoad
[InitializeOnLoad] :在启动Unity的时候运行编辑器脚本 官方案例: using UnityEngine; using UnityEditor; [InitializeOnLoa ...
- Android平台 视频编辑的高级版本
基本覆盖了秒拍,美拍,快手等视频编辑的大部分功能. 增加了44种滤镜,基本覆盖市面上大部分APP中的滤镜效果. 可以实现视频和视频, 视频和图片,视频和您的UI界面叠加. 在叠加的过程中:支持任意时间 ...
- 我是如何给discuz模板做语法高亮的
本人一直做ASP.NET开发,近期接到任务要用Discuz开发一个社区,第一次接触PHP,PHP灵活的语法,天生的模块化,各种语法糖深深的震惊了我,我从内心深处感受到了PHP是最牛逼的语言!!! 好了 ...
- java第五周学习
在Java中类与类之间的关系 1.聚合关系 : 两个类的关联程度较低,可以单独存在. 2.组合关系 : 两个的关联程度比较高. Java中如何来表现这个关系. 一类A作为属性存在类B中. 3.依赖关系 ...
- 在Eclipse中用TODO标签管理任务(Task)
Elipse为Java项目的时候,有一个很人性化的“任务管理”功能,利用这个功能可以方便地将项目中一些需要处理的任务记录下来.先来看看“任务管理”是怎么使用的吧.下面这个类在Class和name 属性 ...
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
