关闭

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

518人阅读 评论(0) 收藏 举报
分类:

6text-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)

 

7text-decoration-------文本修饰线

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

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

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

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

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

text-decoration:groove;-----槽线

 

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

 

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

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

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

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

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

 

9text-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;

         }

10box-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;

         }

 

11box-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);

         }

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:62270次
    • 积分:1501
    • 等级:
    • 排名:千里之外
    • 原创:88篇
    • 转载:18篇
    • 译文:0篇
    • 评论:2条