css属性教程.doc

CSS3新属性 css2中的背景属性 Background-color 背景颜色 Background-image 背景图片 Background-position 背景图片的位置 Background-position-x 背景图片的x位置 Background-position-y 背景图片的y位置 Background-repeat 背景图片的重复方式 Background-attachment 背景图片的绑定方式 Background:背景图片的综合属性设定 CSS3中新增的属性： 多背景属性 格式：background: url (图片地址) 重复设定 定位属性 等, url (图片地址) 重复设定 定位属性 等, url (图片地址) 重复设定 定位属性 等.... Background-origin： 背景原点定位属性 Padding-box:padding开始的位置为原点(默认) Border-box 从最外面边框开始的位置为原点 Content-box：从内容开始的位置为原点 Background-clip: 背景图片切割属性 Border-box 从边框开始切割（默认，不切割） Padding-box padding向外(边框)的内容不现实 Content-box: 内容向外(边框和padding)不显示 text :文字切割(需要使用浏览器前缀) Background-size:设置背景图片的大小 值为长度单位即可 Auto背景图片原始大小 默认值 cover 适当缩放图片使得图片刚好能覆盖元素 contain 适当缩放图片使得元素刚好包含图片 关于颜色 CSS2中的颜色表示方式 英文单词:red,green,blue,pink.... rgb模式: rgb(红色值,绿色值,蓝色值) 所有值为0-255 HEX模式:#红色值绿色值蓝色值 (所有值为00-FF) CSS3中新增的颜色表示方式 rgba模式 增强的RGB模式，在RGB模式的基础上增加了A值，A表示透明度，取值为0-1之间的数值，0为完全透明，1为完全不透明 格式:rgba(红色值,绿色值,蓝色值,透明度) hsl模式 HSL模式也叫做色轮模式 H 色调 选择颜色种类 取值0-360 S 饱和度 0% -100% L 亮度 0%-100% 注意：HSL模式的目的是为了无限的接近自然界颜色种类的表示方式。 hsla模式 在HSL模式的基础上添加的透明度值的新的颜色表示方式 H 色调 选择颜色种类 取值0-360 S 饱和度 0% -100% L 亮度 0%-100% A 透明度 0-1之间的小数 新的颜色属性 Opacity:设置透明度属性 设置元素的透明值，取值为0-1之间的小数 新的颜色值 Transparent 透明 属于英文单词颜色 关于浏览器前缀 浏览器: IE浏览器 -ms- 前缀 火狐浏览器 -moz- 前缀 chrome浏览器 -webkit-前缀 safari浏览器 -webkit-前缀 opera浏览器 -o-前缀 标准的实验性质属性书写规范： -webkit-CSS属性; -moz-CSS属性; -o-CSS属性; -ms-CSS属性; CSS属性; 新的图像表示方式 渐变:分为四种 线性渐变、径向渐变、重复的线性渐变和重复的径向渐变。 注意：渐变本质是图像。不是一种颜色。 线性渐变 最简单的颜色渐变 Linear-gradient(开始颜色,结束颜色); 改变方向的颜色渐变 Linear-gradient(方向,开始颜色,结束颜色); 注意：方向值可以使用位置单词，一共八个方向，left.right.,top,bottom,left top,left bottom,right top,right bottom。 多颜色渐变 Linear-gradient(方向,开始颜色,中间色....,结束颜色) 制定渐变颜色的位置 Linear-gradient(方向,开始颜色 位置点,中间色 位置点....,结束颜色 位置点) 注意：位置点可以是像素可以是百分比，只要是长度就行... 径向渐变 最简单的径向渐变 Radial-gradient(开始颜色,结束颜色) 带有制定原点 Radial-gradient(原点,开始颜色,结束颜色) 注意:原点为坐标，可以是像素可以是百分比也可以是英文单词. 设定渐变的形状 Radial-gradient(原点,形状,开始颜色,结束颜色) circle 圆形 ellipse 椭圆形默认值 设定渐变的大小 Radial-gradient(原点,形状 大小,开始颜色,结束颜色) Closest-side 最近的边 Closest-corn