CSS3美化网页元素

一，字体样式

例：

body{

        font-family:Time,"Time New Roman","楷体"；

        font-size:18px;    ----------------(单位：px,em,rem,cm,mm,pt,pc)

        font-style:italic;    ----------------(italic:斜体 normal:默认 oblique:正体)

        font-weight:bold;  ----------------(normal,bolder,lighter,像素值)

}

font属性：字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

二，文本样式

1）文本颜色：

color属性 RGB 十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

rgb(r,g,b) : 正整数的取值为0～255 RGBA 在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

2）水平对齐方式

text-align属性 

3）垂直对齐方式

vertical-align属性：middle,top,bottom

4)文本阴影

text-shadow : color  x-offset  y-offset  blur-radius

 x-offset：X轴位移，用来指定阴影水平位移量

y-offset：Y轴位移，用来指定阴影垂直位移量

blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围

5）文本装饰

text-decoration属性 

三，超链接伪类

语法：标签名:伪类名{声明;}

设置伪类的顺序：a:link->a:visited->a:hover->a:active

四，列表样式

1）list-style-type

list-style-image

list-style-position

五，背景样式

1）背景颜色 background-color

2）背景图像 background-image

background-image:url(图片路径);

3）背景定位  background-position属性

4）背景属性 background属性

background:背景颜色 背景图像 背景定位 背景重复方式

5）背景重复方式 background-repeat属性

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

6）背景尺寸 background-size

六，渐变

线性渐变 颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

linear-gradient ( position,  color1,  color2,…)

径向渐变 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

七，css实现自定义鼠标样式

cursor属性：显示规定的鼠标样式

定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

语法：{cursor:url('图标路径'),default;}

eg:

* {
    cursor: url(cur/Handwriting.cur), default;
}

不同浏览器对自定义图标的兼容性不一，要设置一个默认的普通图标，如default，pointer等。