模块四 CSS3的文本与图标 (1).pptx

主讲：周怡燕响应式WEB应用开发（HTML5+CSS3）网页设计

模块四CSS3的文本与图标CSS3字体03CSS3iconfont(字体图标)04项目实施05CSS3的文本样式属性02CSS3的多列布局01

CSS3的多列布局/01

CSS3的多列布局4column-count指定了需要分割的列数。column-gap指定了列与列间的间隙column-rule-style指定了列与列间的边框样式column-rule-width指定了两列的边框厚度column-rule-color指定了两列的边框颜?column-rule是column-rule-*所有属性的简写column-width指定了列的宽度

CSS3的文本样式属性/01

CSS3的文本样式属性6CSS3中包含几个新的文本特征。在本节中一起学习以下文本属性：text-transformtext-shadowtext-overflowword-wrapword-break

CSS3的文本样式属性7text-transformtext-transform属性用来控制文本的大小写。语法规则如下：text-transform:none|capitalize|uppercase|lowercasenone:无转换发生capitalize:将每个单词的第一个字母转换成大写，其余无转换发生uppercase:转换成大写lowercase:转换成小写

CSS3的文本样式属性8text-shadowtext-shadow属性可以为文本添加阴影效果。语法规则如下：text-shadow:h-shadowv-shadowblurcolor;h-shadow:必需，水平阴影位置，允许有负值；(其值为正值向右偏移，其值为负值，向左偏移)v-shadow:必需，垂直阴影位置，允许有负值；(其值为正值向下偏移，其值为负值，向上偏移)blur:可选，模糊距离；(其值指的是阴影的模糊程度，其值不能为负值，如果值越大，阴影越模糊，反之阴影越清楚)color:可选，阴影颜色；(其值指的是阴影的颜色，也可以用rgba色)

CSS3的文本样式属性9text-shadow试一试：

CSS3的文本样式属性10text-stroketext-stroke属性可以为文本添加描边效果，所谓的“描边效果”，指的是给文字添加边框。语法规则如下：text-stroke:widthcolor;text-stroke是一个复合属性，它是由text-stroke-width和text-stroke-color两个子属性组成。（1）text-stroke-width：定义边框的宽度。（2）text-stroke-color：定义边框的颜色。Crhome和Firefox这两个浏览器都只能识别-webkit-前缀的text-stroke属性。你没看错，Firefox浏览器也是。这个text-stroke属性有点特殊。text-stroke:1pxred;

CSS3的文本样式属性11text-stroke文字描边效果在实际开发中并不常用，如果你有创意的话，可以结合其他技术来看看。例如，使用text-stroke配合color:transparent;，我们还可以实现镂空文字！Tips：color:transparent;表示定义字体颜色为透明。

CSS3的文本样式属性12text-stroke文字渐变效果先了解一下-webkit-background-clip:text;-webkit-background-clip:text;意思是，以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。width:500px;height:300px;background:linear-gradient(toright,red,orange,blue,green);color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);

项目实战:UShare欢迎页

CSS3的文本样式属性14text-overflowtext-overflow属性指定应向用户如何显示溢出内容语法规则如下：text-overflow:clip|ellipsis|string;clip：超出的部分直接截断ellipsis：超出的部分用省略号表示string：超出的部分用自定义字符表示，这个只在Firefox浏览器下有效。

CSS3的文本样式属性15word-wrapword-wrap属性允许长单词或URL地址换行到下一