摄影网站知乎,wordpress 列表排序,企业网站建设 详细方案,建设工程消防设计备案网站文本样式
概念:在CSS3中#xff0c;增加了丰富的文本修饰效果#xff0c;使得页面更加美观舒服。 常用的文本样式属性
属性说明text-shadow文本阴影text-stroke文本描边text-overflow文本溢出word-wrap强制换行font-face嵌入字体
W3C坐标系 我们日常生活使用最多的是数学坐…文本样式
概念:在CSS3中增加了丰富的文本修饰效果使得页面更加美观舒服。 常用的文本样式属性
属性说明text-shadow文本阴影text-stroke文本描边text-overflow文本溢出word-wrap强制换行font-face嵌入字体
W3C坐标系 我们日常生活使用最多的是数学坐标系但CSS3使用的坐标系是W3C坐标系。 数学坐标系和W3C坐标系唯一的区别在于y轴正方向的不同 数学坐标系一般用于数学形式上的应用而在前端开发中几乎所有涉及坐标系的技术使用的都是W3C坐标系这些技术包括CSS3Canvas和SVG等
text-shadow属性
概念:text-shadow属性为文本添加阴影效果。text-shadow属性可以定义多个阴影这时text-shadow属性是一个以英文逗号(,)隔开的值列表。这时阴影效果会按从左到右的顺序应用到文本上因此可能会出现相互覆盖的效果。但是text-shadow属性永远不会覆盖文本本身阴影效果也不会改变的大小
语法格式
/*定义单个阴影*/
text-shadow:x-offset y-offset blur color;
/*定义多个阴影 */
text-shadow:x-offset y-offset blur color,x-offset y-offset blur color...参数说明
x-offset必选值表示阴影的水平偏移距离。由于CSS3采用的是W3C坐标系因此如果值为正则阴影向右偏移如果值为负则阴影向左偏移y-offset必选值表示阴影的垂直偏移距离。由于CSS3采用的是W3C坐标系因此如果值为正则阴影向下偏移如果值为负则阴影向上偏移blur可选值表示阴影的模糊程度阴影越模糊blur值越小阴影越清晰。如果没有指定则默认为0。此外blur不能为负值。color可选值表示阴影的颜色
实例
!DOCTYPE html
htmlheadmeta charsetutf-8titletext-shadow文本阴影/titlestyle.demo{text-shadow:5px 5px 1px greenyellow;}.dem{text-shadow:4px 4px 2px gray,6px 6px 7px gray,8px 8px 2px gray;}.demo1{color:#fff;text-shadow:5px 5px 20px #55ff7f,-5px -5px 20px #55ff7f,5px -5px 20px #55ff7f,-5px 5px 20px #55ff7f;}.demo3{font-size: 30px;color: #fff;text-shadow:1px 1px hsl(0,0%,85%),2px 2px hsl(0,0%,80%),3px 3px hsl(0,0%,75%),4px 4px hsl(0,0%,70%),5px 5px hsl(0,0%,65%),5px 5px 10px black;}/style/headbody!-- 一般文本效果 --div classdemo文本阴影/divbr/!-- 定义多个阴影 --div classdem多个定义文本阴影/divbr/!-- 文字发光效果 --div classdemo1文本阴影/divbr/!-- 3D文字效果 --div classdemo3文本阴影/divbr//body
/html运行结果
