轮廓
轮廓
绘制在HTML元素边框边缘外围
CSS轮廓属性 outline：总体声明所有边框属性
outline值顺序及单个属性 outline-color：设置边框颜色 outline-style：设置边框线样式 outline-width：设置边框线宽度
背景
CSS背景属性 background：总体声明所有背景属性
边框图片
CSS边框图片 Border-image：设置边框填充图片 Border-image-source ：设置图片路径 Border-image-slice ：设置边框向内偏移 Border-image-width ：设置边框宽度 Border-image-outset ：设置图片超出边框的量 Border-image-repeat ：设置图片平铺、铺满、拉伸
• 2、给网页增加背景图片，并让图片放在 顶部居中，不要重复？
• 3、给网页的一个div添加边框，并设置漂 亮的边框效果？
计算机与信息工程系
字体
CSS字体属性 font：总体声明所有字体属性
font值顺序及单个属性 font-style：设置字体样式 font-variant：设置是否小型大写显示文本 font-weight：设置字体粗细 font-size：设置文字大小 font-family：设置字体
字体
@font-face添加自己的字体 默认字体必须在客户机器上存在，有了@font-face就可以使用任何字体了
文本属性
值 color direction Letter-spacing Line-height Text-align Text-decoration Text-indent Text-shadow Text-transform White-space Word-spacing
描述 文本颜色 文字方向 字符间距 行高 对齐方式 文本修饰 首行缩进 文字阴影 大小写转换 如何处理空白 单词间距
CSS3边框、背景、字体和文本
本讲内容
• CSS3边框 • CSS3背景 • CSS3字体 • CSS3文本
边框
CSS边框属性 border：总体声明所有边框属性
border值顺序及单个属性 Border-width：设置边框线宽度 Border-style：设置边框线样式 Border-color：设置边框线颜色
边框阴影
CSS边框阴影 Box-shadow：设置HTML元素边框阴影
box-shadow: h-shadow v-shadow blur spread color inset;
值 h-shadow v-shadow blur spread color inset
描述 水平阴影，可负值 垂直阴影，可负值 模糊距离 阴影尺寸 阴影颜色 将outset外部改为内部阴影
文本属性
值 Word-break Word-wrap
值 Overflow-x Overflow-y overflow
描述 换行规则 长单词换行，如url
描述 内容溢出处理 内容溢出处理 文本超出元素边缘时处理方式
作业
• 1、字体设置有那些属性，给你的网页添 加字体“微软雅黑”，并设置字大小为 12px，标题：16px？
边框
Border-*单边设置 borde右边边框线 border-bottom ：设置底部边框线 border-top：设置顶部边框线
Border-*值顺序及单个属性 Border-*-width：设置边框线宽度 Border-*-style：设置边框线样式 Border-*-color：设置边框线颜色
边框 圆角
CSS边框圆角 Border-radius：设置边框的四个角形状 Border-bottom-left-radius：设置左下角形状 Border-bottom-right-radius ：设置右下角形状 Border-top-left-radius：设置左上角形状 Border-top-right-radius ：设置右上角形状
@font-face定义格式
@font-face{ font-family:字体名; Src:url(字体url地址); font-stretch:如何拉伸字体; font-style:字体样式; unicode-range:字体支持的unicode范围
}
文本颜色和透明度
Color属性 设置HTML元素显示在浏览器窗口的文本颜色 opacity属性 设置HTML元素透明度，值从0.0透明-1.0不透明 IE8 及以前版本使用 filter 属性如：filter:Alpha(opacity=50)
background值顺序及单个属性 Background-color：设置背景颜色 Background-position：设置背景图片位置 Background-size：设置背景图片尺寸 Background-repeat：设置背景图片重复方式 Background-origin：设置背景图片定位区域 Background-clip：设置背景图片绘制区域 Background-attachment：设置背景图片是否固定 Background-image：设置背景图片