HTML5+CSS3-第三节(文本对齐方式、文本修饰线、设定文本大小写、文本阴影、盒子阴影、盒子倒影、渐变色彩、)

（6）text-align-----文本对齐方式

A、text-align :Left;左对齐

B、text-align :right;右对齐

C、text-align :center;居中

D、text-align :justify;内容两端对齐（仅火狐有效果）

E、文字从左到右

Direction:rtl;--（文档流变成从右向左）

text-align :start;（内容对齐方式开始边界，相当于left）

text-align :end;（内容对齐方式结束边界，相当于right）

F、文字从右到左

Direction:ltr;--（文档流变成从左向右）

text-align :start;（内容对齐方式开始边界，相当于right）

text-align :end;（内容对齐方式结束边界，相当于left）

（7）text-decoration：-------文本修饰线

text-decoration：none;----无装饰

text-decoration：underline;---下划线

text-decoration：overline;-----上划线

text-decoration：line-through;-----删除线

text-decoration：wavy;-----波浪线

text-decoration：groove;-----槽线

注意：不支持对文本修饰线加颜色、样式

（8）text-transform:------设定文本大小写

Text-transform:none;默认值，无转换

Text-transform:capitalize;------首字母大写

Text-transform:uppercase;------全部大写

Text-transform:lowcase;-----全部小写

（9）text-shadow:-----设定文本阴影

text-shadow:none;-------无阴影

语法：text-shadow:水平偏移值垂直偏移值阴影模糊度颜色;

注释：

水平偏移值：可为负值

垂直偏移值：可为负值

阴影模糊度：不允许为负值（0-不模糊，单位px，一般范围为0px—10px，数字越大越模糊）

颜色：HSL、RGBA表示都可以

如果为三个值：则指的是：（模糊度默认为0）

text-shadow:水平偏移值 垂直偏移值 颜色;

注意一：如果加多次阴影，中间用逗号隔开，格式：

text-shadow:水平偏移值 垂直偏移值 阴影模糊度 颜色, 水平偏移值1 垂直偏移值1 阴影模糊度1 颜色1,………;

例子：

.div1{

font-size:55px;

font-weight:bold;

font-family:"黑体";

color:red;

text-shadow:4px4px 2px blue,8px 8px 2px yellow,12px 12px 2px skyblue;

}

（10）box-shadow盒子阴影

box-shadow:none;-------无阴影

语法：text-shadow:水平偏移值垂直偏移值阴影模糊度颜色阴影类型;

注释：

水平偏移值：可为负值

垂直偏移值：可为负值

阴影模糊度：不允许为负值（0-不模糊，单位px，一般范围为0px—10px，数字越大越模糊）

颜色：HSL、RGBA表示都可以

阴影类型：为空时，对象类型默认为外阴影；inset为内阴影

注意：如果加多次阴影，中间用逗号隔开，格式：

box-shadow: 水平偏移值 垂直偏移值 阴影模糊度 颜色 阴影类型, 水平偏移值1 垂直偏移值1 阴影模糊度1 颜色1 阴影类型1,………;

例子：

.div2{

margin:50px;

width:100px;

height:50px;

box-shadow:0px0px 5px 5px red,0px 0px 5px 10px yellow,0px 0px 5px 15px skyblue,0px 0px 5px20px gray;

}

例子二：实现脱靶效果

.div3{

margin:150px 0px 0px 100px;

width:20px;

height:20px;

border:1px solid red;

background:black;

border-radius:10px;

box-shadow:0px 0px 0px 10px red,0px 0px 0px 20px yellow,0px0px 0px 30px skyblue,0px 0px 0px 40px gray;

}

（11）box-reflect:盒子倒影，对盒子模型进行倒影设置

语法：box-reflect:位置偏移水印图片

位置：above(上) below（下）left（左）right（右）

偏移：定义对象与阴影之间的间隔（可为负数，负数时，原图和倒影覆盖）

水印图片：设置倒影使用的图片或渐变，默认为原内容

例子：

Css.css:

div{

width:124px;

height:146px;

border:1pxsolid red;

-webkit-box-reflect:below0px;

}

Index.html:

<div><imgsrc="004.jpg"></div>

(12)渐变色彩：

分为linear（线性渐变）和径向渐变

语法：linear-gradient(to 方向,颜色开始点,颜色中间点, ,颜色中间点1,…………..,颜色结束点)

方向：（to后面的方向是最终的方向）

To top----从下到上

To bottom-----从上到下

To right---从左到右

To left-----从右到左

To top left----从右下到左上

To top right----从左下到右上

To bottom-right----从左上到右下

To-bottom-left-----从右上到左下

例子：

p{

width:200px;

height:200px;

margin-top:250px;

border:1pxsolid gray;

font-size:25px;

color:#333;

background:linear-gradient(tobottom left,red,orange,yellow,green,blue,cyan,pink);

}