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

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

A、text-align :Left@H_696_6@;左对齐

B、text-align :right;@H_696_6@右对齐

C、text-align :center@H_696_6@;居中

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

E、文字从左到右

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

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

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

F、文字从右到左

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

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

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

 

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

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

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

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

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

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

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

 

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

 

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

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

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

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

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

 

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

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

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

注释：

水平偏移值：可为负值

垂直偏移值：可为负值

阴影模糊度：不允许为负值（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;

         }

（@H_696_6@10@H_696_6@）@H_696_6@Box-shadow@H_696_6@盒子阴影@H_696_6@

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

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

注释：@H_696_6@

水平偏移值：可为负值

垂直偏移值：可为负值

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

颜色：HSL、RGBA表示都可以

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

 

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

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{@H_696_6@

         @H_696_6@margin:150px 0px 0px 100px;

         @H_696_6@width:20px;

         @H_696_6@height:20px;

         @H_696_6@border:1px solid red;

         @H_696_6@BACkground:black;

         @H_696_6@border-radius:10px;

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

         @H_696_6@}

 

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

语法：@H_696_6@Box-reflect:@H_696_6@位置@H_696_6@偏移@H_696_6@水印图片@H_696_6@

 

位置：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)@H_696_6@渐变色彩：@H_696_6@

分为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);

         }