一, 简介
1,css3模块:
(1)选择器
(2)框模型
(3)背景和边框
(4)文本效果
(5)2D和3D转换
(6)动画
(7)多列布局
(8)用户界面
二, 边框
border-radius
box-shadow
border-image
目标:创建圆角边框,向矩形添加阴影,使用图片来绘制边框。
1,圆角边框
例:
<style>
div{
width:300px;
height:50px;
text-align:center;
border:5px sloid yellow;
background:violet;
border-radius:25px; /*圆角属性*/
}
</style>
<body>
<div>border-radius添加圆角</div>
</body>
2,向矩形添加阴影
例
<style>
div{
width:200px;
height:50px;
background-color:yellow;
box-shadow:10px20px5px#ccc;/*方框添加阴影*/
}
</style>
<div>box-shadow方框添加阴影</div>
3,图片绘制边框
略
三, 背景
background-size 背景图片的尺寸
background-origin 规定背景图片的定位区域。
了解:
background-clip 规定背景的绘制区域。
四,文本效果
text-shadow 可向文本应用阴影
word-wrap 文本强制文本进行换行 - 即使这意味着会对单词进行拆分
了解:
Hanging-punctuation 规定标点字符是否位于线框之外
Punctuation-trim
Text-align-last
Text-emphasis
Text-justify
Text-outline
Text-overflow
Text-shadow
Text-wrap
Word-break
Word-wrap
五,字体
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
明天补充