工业UI开发技术-课件 2-2-3 CSS效果-2.pptxVIP

CSS效果深圳市信息职业技术学院

字体效果01目录文本效果02背景效果03边框效果04列表效果05渐变06

本节目标 本任务通过学习CSS基本概念，CSS语法结构，选择器，属性，学习如何通过CSS设置HTML标签的样式与布局。通过本节学习可以：掌握CSS概念掌握CSS语法掌握CSS选择器与属性掌握CSS盒子模型掌握CSS布局方式

04边框效果

边框效果border属性：设置边框。 单一属性： 四周： border-style:solid;（dotted,dashed,double) border-width:1px; border-color:#f00; 某一方向：(top、right、bottom、left) border-bottom-style:dotted; border-bottom-width:5px; border-bottom-color:#F93; 复合属性（常用）： border:1pxsolid#0f0;（顺序：宽、样式、颜色） border-bottom:3pxdouble#90C;(粗细大于等于3px，小于3px看不到双线)

05列表效果

列表效果list-style-type 设定引导列表项的符号类型值为none、disc、circle、square、decimal、lower-romanlist-style-image 使用图像作为定制列表符号list-style-position 决定列表项目缩进的程度outside、insideul{ list-style:squareinsideurl(arrow.gif);}

06渐变

渐变1、背景渐变（gradients） 线性渐变（linear-gradient） 径向渐变（radial-gradient） 重复的线性渐变（repeating-linear-gradient） 重复的径向渐变（repeating-radial-gradient）2、线性基本语法 background:linear-gradient(direction[方向],color-stop1[颜色],color-stop2[颜色],...);3、用角度值指定渐变的方向方向值：常用的是left，toright,lefttop等等角度值：常用的是0deg、180deg等等

渐变1、角度值 顺时针为正值 逆时针为负值2、带透明度的渐变 使用rgba()函数来定义颜色结点3、重复的线性渐变 repeating-linear-gradient()函数用于重复线性渐变：#grad{/*Safari5.1-6.0*/background:-webkit-repeating-linear-gradient(red,yellow10%,green20%);/*标准的语法*/background:repeating-linear-gradient(red,yellow10%,green20%);

THANKYOU深圳市信息职业技术学院