CSS3 入门教程学习摘要笔记

主要记录CSS3中新增属性及个别注意事项，加强记忆。

CSS3

• CSS 用于控制网页的样式和布局。
• CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。
• CSS3 是最新的 CSS 标准。

边框

border-radius（CSS3新增）

是一个简写属性，用于设置四个 border-*-radius 属性。
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right- radius

• 在四个角上一一指定，可以使用以下规则：
  • 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  • 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  • 一个值： 四个圆角值相同
• 设置每个 radius 的四个值。
  • 如果省略 bottom-left，则与 top-right 相同。
  • 如果省略 bottom-right，则与 top-left 相同。
  • 如果省略 top-right，则与 top-left 相同。
• 浏览器
  • 支持Internet Explorer 9+、Opera 、Firefox、Chrome 以及 Safari 。
• 可以给任何元素制作 “圆角”。

border-top-left-radius

定义了左上角的边框形状。

• 为元素添加圆角边框。

border-top-right-radius

定义了右上角的边框形状。

• 为元素添加圆角边框。

border-bottom-left-radius

定义左下角边框的形状。

• 向元素添加圆角边框。

border-bottom-right-radius

定义右下角边框的形状。

• 向元素添加圆角边框。

box-shadow

向框添加一个或多个阴影。

• 由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
• 浏览器
  • 支持Internet Explorer 9+、Opera 、Firefox、Chrome 以及 Safari 。
    

border-image

一个简写属性，用于设置以下属性：
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
如果省略值，会设置其默认值。

• 浏览器
  • 支持Firefox、Chrome 以及 Safari。
  • 不支持ie浏览器。
  • 对于Opera，需要前缀 -o-。

背景

background-image

描述了元素的背景图像。

• 背景图像进行默认平铺重复显示，以覆盖整个元素实体。
• 务必设置背景色，如果图像是不可用，将被使用。
• 不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

background-size

指定背景图像大小。

• 可以指定背景图片.
• 在不同的环境中指定背景图片的大小。
• 可以指定像素或百分比大小，指定的大小是相对于父元素的宽度和高度的百分比的大小。
  

background-clip

指定背景绘制区域。

background-origin

指定background-position属性应该是相对位置。

• 如果背景图像background-attachment是"固定"，这个属性没有任何效果。
• 
  

渐变

在两个或多个指定的颜色之间显示平稳的过渡。

线性渐变

linear gradient() - 向下/向上/向左/向右/对角方向。

• 至少定义两种颜色结点。
• 设置一个起点和一个方向（或一个角度）。
• 默认 - 从上到下。
• 指定水平和垂直的起始位置来制作一个对角渐变。
• 可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
• 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
• 注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
• 支持透明度（transparency），可用于创建减弱变淡的效果，使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

重复的线性渐变

repeating-linear-gradient()。

径向渐变

radial gradient() - 由它们的中心定义。

• 必须至少定义两种颜色结点。
• 指定渐变的中心、形状（圆形或椭圆形）、大小。
• 默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
• 默认情况 - 颜色结点均匀分布。
• 设置形状。
  • shape 参数定义了形状。
  • circle 表示圆形，ellipse 表示椭圆形。
  • 默认值是 ellipse。
• size 参数定义了渐变的大小。它可以是以下四个值：
  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

重复的径向渐变

repeating-radial-gradient() 。

文本效果

以下各浏览器指定版本均支持

text-overflow

指定当文本溢出包含它的元素，应该发生什么。

text-shadow

向文本设置阴影。

word-break

规定自动换行的处理方法。

word-wrap

允许长的内容可以自动换行。

以下个别浏览器版本支持

text-align-last

规定如何对齐文本的最后一行。

• 浏览器
  • 只有 Internet Explorer 支持 text-align-last 属性。。
  • Internet Explorer 不支持 “start” 和 “end” 值。
  • Firefox 支持另一个可替代该属性的属性，即 -moz-text-align-last 属性。
• 只有在 text-align 属性设置为 “justify” 时才起作用。。

text-emphasis

向元素的文本应用重点标记以及重点标记的前景色。

text-justify

指定文本对齐设置为"justify"的理据。

以下目前主流浏览器都不支持

hanging-punctuation

指定一个标点符号是否会在启动或在结束时文本行框以外。

punctuation-trim

指定是否应修饰，当它出现在一条线，或相邻的另一个全形标点符号字符开头或结束标点字符。

text-outline

指定文字大纲。

text-wrap

指定文本换行规则。

字体

@font-face 规则 - 首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

• 消除了对访问者计算机上安装的字体的依赖。
• web设计师可以使用他们喜欢的任意字体。
• 找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上。
• "自己的"的字体是在 CSS3 @font-face 规则中定义的。
• 浏览器
  • Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体。
  • Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。
  • Chrome, Safari 和 Opera 也支持 SVG 字体/折叠。
  • Internet Explorer 同样支持 EOT (Embedded OpenType) 字体。
  • 需要注意的是： Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
• 注意
  • Web字体受相同的域限制。
  • 字体文件必须与使用它们的页面在同一个域上，除非使用HTTP访问控制来放宽此限制。

transform

应用于元素的2D或3D转换。

• 允许将元素旋转，缩放，移动，倾斜等。
• 浏览器
  • Internet Explorer 10, Firefox, 和 Opera支持transform 属性。
  • Chrome 和 Safari 要求前缀 -webkit- 版本。
  • Internet Explorer 9 要求前缀 -ms- 版本。

transform-origin

允许更改转换元素的位置。

• 2D转换元素可以改变元素的X和Y轴。
• 3D转换元素，还可以更改元素的Z轴。
• 使用此属性必须先使用transform 属性。
• 

backface-visibility

定义当元素不面向屏幕时是否可见。

• 如果在旋转元素不希望看到其背面时，该属性很有用。

2D转换

2D变换方法：

translate()

根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

rotate()

在一个给定度数顺时针旋转的元素。

• 负值是允许的，这样是元素逆时针旋转。

scale()

增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

skew()

包含两个参数值，分别表示X轴和Y轴倾斜的角度。

• 如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
  • skewX( );表示只在X轴(水平方向)倾斜。
  • skewY( );表示只在Y轴(垂直方向)倾斜。

matrix()

和2D变换方法合并成一个。

• 有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

3D转换

rotateX()

围绕其在一个给定度数X轴旋转的元素。

rotateY()

围绕其在一个给定度数Y轴旋转的元素。

transform-style

指定嵌套元素是怎样在三维空间中呈现。

• 使用此属性必须先使用transform 属性。

perspective

定义 3D 元素距视图的距离，以像素计。

• 允许改变 3D 元素查看 3D 元素的视图。
• 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
• 只影响 3D 转换元素。
• 请与 perspective-origin 属性一同使用该属性，这样就能够改变 3D 元素的底部位置。
• 浏览器
  • 目前浏览器都不支持 perspective 属性。
  • Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

perspective-origin

定义 3D 元素所基于的 X 轴和 Y 轴。

• 允许改变 3D 元素的底部位置。
• 定义时的perspective-origin属性，它是一个元素的子元素，透视图，而不是元素本身。

过渡

元素从一种样式逐渐改变为另一种的效果。

• 要实现这一点，必须规定两项内容：
  • 指定要添加效果的CSS属性 - 更改时效果会发生变化。
  • 指定效果的持续时间。
  • ** 如果未指定transition-duration的期限，transition将没有任何效果，因为默认值是0**。

transition

是一个简写属性，用于设置四个过渡属性：
transition-property
transition-duration
transition-timing-function
transition-delay

• 请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
• 浏览器
  • 支持Internet Explorer 10、Firefox、Opera 和 Chrome 。
  • Safari 支持替代的 -webkit-transition 属性。
  • Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

transition-property

指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属
性的变化）。

• 一个转场效果，通常会出现在当用户将鼠标悬停在一个元素上时。
• 

transition-duration

规定完成过渡效果需要花费的时间（以秒或毫秒计）。

transition-delay

规定过渡效果何时开始（以秒或毫秒计）。

transition-timing-function

指定切换效果的速度。

• 允许一个过渡效果，以改变其持续时间的速度。
• 

动画

@keyframes 规则 - 创建动画。

• 取代许多网页动画图像，Flash动画，和JAVAScripts。
• 改变任意多的样式任意多的次数。
• 把它绑定到一个选择器，否则动画不会有任何效果。。
• 必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。。
• 用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
  • 0% 是动画的开始，100% 是动画的完成。
• 指定至少这两个CSS3的动画属性绑定向一个选择器：
  • 规定动画的名称
  • 规定动画的时长
• 浏览器
  • @keyframes支持Internet Explorer 10。
  • @-moz-keyframes支持Firefox。
  • @-o-keyframes支持Opera 。
  • @-webkit-keyframes支持Safari 和 Chrome 。

animation

是六个动画属性的速记属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

• 请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
• 浏览器
  • Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
  • Safari 和 Chrome 支持替代的 -webkit-animation 属性。
  • Internet Explorer 9 以及更早的版本不支持 animation 属性。

animation-name

为 @keyframes 动画规定名称。

animation-duration

定义动画完成一个周期需要多少秒或毫秒。

animation-delay

定义动画什么时候开始。

• 单位可以是秒（s）或毫秒（ms）。
• 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

animation-timing-function

指定动画速度曲线。

• 定义动画从一套 CSS 样式变为另一套所用的时间。
• 速度曲线用于使变化更为平滑。
• 

animation-iteration-count

定义动画应该播放多少次。

animation-direction

控制如何在reverse或alternate周期播放动画。

• 如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
• 如果把动画设置为只播放一次，则该属性没有效果。

animation-fill-mode

设置样式以在动画不播放时应用元素。

• 其属性值是由逗号分隔的一个或多个填充模式关键词。
• 

animation-play-state

设置是否运行或暂停动画。

• 可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。
• 

列布局

columns

是一个简写属性，用于设置列宽和列数。

• 
• 浏览器
  • Internet Explorer 10 和 Opera 支持 column 属性。
  • Firefox 支持替代的 -moz-column 属性。
  • Safari 和 Chrome 支持替代的 -webkit-column 属性。
  • Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。

column-count

规定元素应该被划分的列数。

• 默认值 auto。

column-gap

规定列之间的间隔。

• 如果列之间设置了 column-rule，它会在间隔中间显示。

column-rule

是一个速记属性设置所有column-rule-*属性。设置列之间的宽度，样式和颜色。

column-rule-color

指定列之间的颜色规则。

column-rule-style

指定列之间的样式规则。

column-rule-width

指定列之间的宽度规则。

column-fill

指定如何填充列。

• 浏览器
  • 仅支持Firefox - -moz-column-fill
    

column-span

规定元素应横跨多少列。

column-width

规定列的宽度。

用户界面

resize

指定一个元素是否是由用户调整大小的。

• 浏览器
  • 支持Firefox 4+，Chrome，和 Safari。
  • 不兼容IE浏览器。
• 

box-sizing

以特定的方式定义匹配某个区域的特定元素。

• 可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。
• 浏览器
  • Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
  • Firefox 支持替代的 -moz-box-sizing 属性。
    

outline-offset

设置轮廓框架在 border 边缘外的偏移。

• 浏览器
  • 不兼容IE浏览器。
  • -webkit-,，-ms- 或 -moz-。
• Outlines在两个方面不同于边框：
  • Outlines 不占用空间
  • Outlines 可能非矩形

appearance

使元素看上去像标准的用户界面元素。

• 浏览器
  • 所有主流浏览器都不支持 appearance 属性。
  • Firefox 支持替代的 -moz-appearance 属性。
  • Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
• 

icon

为创作者提供了将元素设置为图标等价物的能力。

• 浏览器
  • 没有主流浏览器支持icon属性。
• 元素的图标是不可使用，除非"content"属性设置为"icon"。

以下仅支持部分版本浏览器

nav-down

规定当使用 nav-down 导航键时，向何处进行导航。

nav-index

指定了连续的导航元素的顺序（“Tab键顺序”）。

nav-left

指定使用箭头向左导航键导航。

nav-right

规定当使用 nav-right 导航键时，向何处进行导航。

nav-up

规定当使用 nav-up 导航键时，向何处进行导航。

图片

filter

定义元素(通常是)的可视效果(例如：模糊与饱和度)。

• 浏览器
  • 
• 
• 
• 
• 

弹性盒子

弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

• 由弹性容器(Flex container)和弹性子元素(Flex item)组成。
• 通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
• 弹性容器内包含了一个或多个弹性子元素。
• 弹性盒子只定义了弹性子元素如何在弹性容器内布局。
• 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
• 目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
• 浏览器
  • 

flex

用于设置或检索弹性盒模型对象的子元素如何分配空间。

• 语法：flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
• 
• 是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
• 让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容。
• 如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
• 

flex-basis

用于设置或检索弹性盒伸缩基准值。

• 如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。

flex-shrink

用于设置或检索弹性盒的收缩比率。

• 如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。

flex-grow用于设置或检索弹性盒的扩展比率。

• 如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。

flex-direction

规定灵活项目的方向。

• 如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
• 

justify-content

用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

• 使用 align-content 属性对齐交叉轴上的各项（垂直）。
• 
• 
• 

align-items

设置了flex容器的对齐方式。

• 使用每个flex对象元素的 align-self 属性可重写 align-items 属性。。
• 
• 

flex-wrap

规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

• 
• 

flex-flow

用于设置或检索弹性盒模型对象的子元素排列方式。

• 是 flex-direction 和 flex-wrap 属性的复合属性。
• 语法：flex-flow: flex-direction flex-wrap|initial|inherit;
• 如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。

align-content

在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

• 使用 justify-content 属性对齐主轴上的各项（水平）。
• 容器内必须有多行的项目，该属性才能渲染出效果。
• 
• 

order

设置或检索弹性盒模型对象的子元素出现的顺序。

• 如果元素不是弹性盒对象的元素，则 order 属性不起作用。
• 用整数值来定义排列顺序，数值小的排在前面。
• 可以为负值。

align-self

定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

• align-self 属性可重写灵活容器的 align-items 属性。。
• 
• 

多媒体查询

由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

• 
• 

CSS Sprites的原理（图片整合技术）

将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来实现背景图片的定位技术。

• 图片整合的优势：
  • 通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。
  • 通过整合图片来减小图片的体积。

过滤器(filter)

• _ 下划线属性过滤器：在IE6及更低版本浏览器中会继续解析这个规则。
• *属性过滤器：该属性能被IE7及以下浏览器识别，其它浏览器忽略该属性的作用。
• \9 ：IE版本识别；其他浏览器都不识别 语法：选择符{属性：属性值\9;} 。
• \0 : IE8及以上版本识别；其他浏览器都不识别 语法：选择符{属性：属性值\0；}。

BFC(Block formatting context)

直译为"块级格式化上下文"。

• 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
• BFC布局规则：
  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 。
  • 每个元素的margin box的左边， 与包含块border box的左边相接触。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
  • 计算BFC的高度时，浮动元素也参与计算。
• 生成BFC条件：
  • 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible。
• BFC应用：返回顶部。

CSS文档统筹

网页自身优化（如何让网站被搜索引擎搜索到）

页面主题优化

网站名字要合理，最好包括网站的主要内容。

页面头部优化

meta标签中的description和keywords。

超链接优化

• 采用纯文本超链接。
• 按规范书写超链接，加title。
• 最好别使用图片热点链接。

图片优化(alt、title)

为每个标签加上alt属性，alt属性的作用是当图片无法显示时以文字作为替代显示出来。

为网站制作一个“网站地图”

列出了网站中各个栏目的入口地址。

PageRank（pr值,友情链接）

标明了某个网站的重要程度。

• 方法为交换链接。

静态页面和动态页面

Google一类的搜索引擎会尽量避免索引带有参数动态页面，而喜欢索引普通的静态页面。

避免大“体积”的页面

控制在100kb为佳。

合理的代码结构

滤镜

• 滤镜

语法：{FILTER：ALPHA(opacity=opacity，finishopacity=finishopacity， style=style，startx=startx，starty=starty，finishx=finishx，finishy=finishy)}

参数：

• Opacity参数代表图象的起始透明度，其默认的数值是从0到100，0代表完全透明，100代表完全不透明；
• FinishOpacity是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度，作用范围也是0到100；
• Style表示透明区域的形状特征，其中“0”代表统一形状，“1”代表线形。“2”代表放射状，“3”代表矩形；
• startx表示渐变透明效果开始处的X坐标，starty代表渐变透明效果开始处的Y坐标，finishx代表渐变透明效果结束处的X坐标，finishy代表渐变透明效果结束处的Y坐标。

作用：实现各种溶入效果，如果大家将该滤镜与网页脚本语言结合起来，对滤镜的参数进行处理的话，就能很轻易地做出淡入淡出的效果来。

• 模糊滤镜

语法：{filter:blur(add=add，direction=direction，strength=strength)}

参数：

• add是用来指定图象是否被改变成印象派的模糊效果，模糊效果是按顺时针的方向进行的，它的数值应该是ture或false；
• direction参数是用来设置模糊的方向的，其中0度代表垂直向上，每45度为一个单位，默认值是向左的270度；
• strength 参数代表有多少像素的宽度将受到模糊影响，缺省的参数值是5个像素，而且该参数值只能使用整数来指定。

作用：该滤镜主要是让图象产生一种模糊效果。

• 斜影滤镜

语法：{filter:shadow(color=color,direction=direction)}

参数：

• color代表投影的底色，该数值是用英文字母来代替的，例如投影底色是红色的话，就应该设置color=red;
• direction参数是用来设置投影方向的，如果该数值是0的话，就代表垂直投影，此外该数值每45度为一个单位，它的默认值是向左的270度。

作用：该滤镜主要是为对象建立轮廓的影子效果的，它可以在指定的方向建立物体的投影。

• 发光滤镜

语法：{filter:glow(color=color,strength=strength)}

参数：

• color参数与阴影滤镜的color参数功能几乎是一样的，不过这里的color参数是用来设置发光颜色的;
• strength参数是用来指定发光强度的，其值为1到255之间的任何整数。

作用：该滤镜可以给图象或者文字产生一种发光效果。

• 灯光滤镜 作用：

语法：{filter:light}

参数：一旦为对象定义了“light"滤镜属性后，大家就可以调用它的“方法(Method)"来设置或者改变属性，该滤镜可用的方法有：AddAmbient方法是用来加入包围光源的，AddCone方法是用来加入锥形光源的，MoveLight方法是用来移动光源的，Changstrength方法是用来改变光源强度的，Changcolor方法是用来改变光的颜色的，Clear方法是用来清除所有光源的。

作用：灯光滤镜是模拟光源来投射文字或者图象，使图象和文字能产生一定的投射效果。

• 遮罩滤镜

语法： {filter:mask(color=color)}

参数：color参数表示覆盖对象表面的颜色。

作用：该滤镜可以为对象建立一个覆盖于表面的膜，其效果就象戴着有色眼镜看物体一样。

• 阴影滤镜

语法：{filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive)}

参数：

• Color参数表示投射阴影的颜色;
• offx 表示水平方向阴影的偏移量，offy 表示竖直方向阴影的偏移量;
• Positive参数是一个布尔值，其数值如果为TRUE，就为任何的非透明像素建立可见的投影，如果为FASLE，就为透明的像素部分建立透明效果。

作用：阴影滤镜就是给对象添加阴影效果，其工作原理是建立一个偏移量，加上色彩。

• 灰度滤镜

语法：{filter:gray}

参数：该滤镜没有参数。

作用：该滤镜主要是将图象对象转换成灰度形式显示。

• 翻转滤镜
  语法：{filter:filph} {filter:filpv}

参数：这种滤镜也不带参数，其中{filter:filph}是实现水平翻转的，{filter:filpv} 是实现竖直翻转的。

作用：翻转滤镜主要是实现图象对象的水平或者竖直翻转效果。

• X光滤镜

语法： {filter:xray}

参数：该滤镜本身不含有参数。

X光滤镜可以让对象反映出它的轮廓并把这些轮廓加亮。

• 倒置滤镜 作用：

语法： {filter:invert}

参数：该滤镜没有参数。

作用：使用该滤镜可以把包括色彩、饱和度、和亮度值等对象的可视化属性全部翻转。

• 波纹滤镜

语法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}

参数：

• add参数是一个布尔数值，它是用来表示是否要把对象按照波形样式打乱；
• freq参数是用来设置波纹频率的，也就是指定在对象上一共需要产生多少个完整的波纹；
• lightstrength参数可以设置波纹光影的增强效果的，其数值范围在0到100之间；
• phase参数是用来设置正弦波的偏移量的;
• strength是设置正弦波的振幅大小的。

作用：波纹滤镜可以在水平和竖直方向利用正弦波打乱图象，使图象产生水波效果。

写在后面

又花了两个上午学习了CSS和CSS3的基础知识，内容是有点多，需要实践中慢慢消化，学习过程中觉得很神奇，平时看到的用户界面效果，马上就要在我的手上呈现出来了。

笔记还是按照学习顺序记录的，基本都是来自W3C，看着依旧会有点乱，仅仅作为自己学习过程的积累，日后在实践和做题中总结出来的经验和解决方法也会时不时更新的。

若是发现有错误欢迎大噶纠正！我也会及时弄清改正的！希望没有误导到可爱的你。

接下来就要向JS和JQ出发啦～
继续努力！