CSS3学习笔记--1

1.CSS3 被划分为模块,其中最重要的 CSS3 模块包括：

• 选择器
• 框模型
• 背景和边框
• 文本效果
• 2D/3D 转换
• 动画
• 多列布局
• 用户界面

2.CSS3边框:

border-radius:

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性,允许您为元素添加圆角边框;

border-image:

border-image 属性是一个简写属性，用于设置border-image-*属性,可以使用图片来创建边框;

box-shadow:

box-shadow向框添加一个或多个阴影,

box-shadow: h-shadow v-shadow blur spread color inset;

3.CSS3 背景:

background-size:

background-size 属性规定背景图片的尺寸,在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。利用这个属性可以使图片适应DIV大小;

background-origin:

background-origin 属性规定背景图片的定位区域,背景图片可以放置于 content-box、padding-box 或 border-box 区域;

//未完待续...

CSS3内阴影（Inset）效果的文字

我们可以用text-shadow属性来模拟文字的Inset效果，但这样做却不是真正的Inset，这里我主要是用CSS3的background-clip属性来完成这个Inset效果。

CSS3中的background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域。其语法如下：

1	background-clip ： border-box || padding-box || content-box

各个值的说明：

1、border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；

2、padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉；

3、context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；

下面我就用这个属性来制作一个文字内阴影Inset效果，该效果只能在webkit内核的chrome和safari浏览器下才有效果。CSS代码如下：

1 2 3 4 5 6 7 8 9

.insetText {     font-family: Lucida Grande;     background-color:#666666;     -webkit-background-clip: text;     -moz-background-clip: text;     background-clip: text;     color:transparent;     text-shadow: rgba(255,255,255,0.5)0px 3px 3px; }

HTML代码如下：

1 2 3

<divstyle="background-color:#cccccc;">     <divclass="insetText"style="padding:20px;font-size:58px;">this is the inset text</div> </div>

外面的那层背景为#ccc的div不能少哦，有了它才能体现出inset效果。