CSS3 学习

一、 注意web

 -webkit- 对于Safari 5 以及更老的版本或chrome有时须要前缀 -webkit-。chrome

 -o- Opera浏览器。浏览器

  -moz- 兼容老的firefox服务器

 

二、布局

CSS3 被划分为模块。字体

其中最重要的 CSS3 模块包括:动画

  • 选择器spa

  • 框模型firefox

  • 背景和边框设计

  • 文本效果

  • 2D/3D 转换

  • 动画

  • 多列布局

  • 用户界面

三、

边框

border-radius 设置边框圆角的半径

box-shadow 设置阴影效果

border-image 设置边框图片

 

4

背景

background-origin  设置背景图片的位置 context-box border-box padding-box

background-size  设置背景图片的拉伸大小

5

文本效果

text-shadow 文字阴影

word-wrap 自动换行

 

设置显示点点点....

{

white-space:nowrap;

width:12em;

overflow:hidden;

border:1px solid #000000;

text-overflow: ellipsis;

}

6、字体

经过 CSS3,web 设计师能够使用他们喜欢的任意字体。

当您您找到或购买到但愿使用的字体时,可将该字体文件存放到 web 服务器上,它会在须要时被自动下载到用户的计算机上。

您“本身的”的字体是在 CSS3 @font-face 规则中定义的。

7、转换

transform

 2D 转换方法:

  • translate() 移动

  • rotate() 旋转

  • scale() 宽度高度成倍扩大

  • skew() 翻转

  • matrix()

3D 转换方法:

  • rotateX()

  • rotateY()

8、过渡

transition

能够与transform结合着使用

9、动画

@keyframes 规则用于建立动画。在 @keyframes 中规定某项 CSS 样式,就能建立由当前样式逐渐改成新样式的动画效果。

 

将规则绑定到元素上用animation

 

注意浏览器的兼容性

10、多列

多列属性:

  • column-count

  • column-gap

  • column-rule

11、用户界面

用户界面属性:

  • resize

  • box-sizing

  • outline-offset

相关文章
相关标签/搜索