关闭

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

700人阅读 评论(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
查看评论

css3文字阴影和盒子阴影

本来主要讲解了一下css3的一些知识。其中包括圆角,透明,文字,盒阴影等一些比较常用的内容,注意,css3只支持IE9和IE9以上的浏览器。
  • tuzhiaichitang
  • tuzhiaichitang
  • 2017-08-03 11:19
  • 383

盒子阴影box-shadow和文本阴影text-shadow

相关的说明和介绍都写在了注释中: Document .div1{ width: 300px; height: 200px; border:1px solid red; background: orange; /*box-shadow前面前面两个值...
  • m0_37568521
  • m0_37568521
  • 2017-07-13 21:28
  • 72

H5基础——(5)怪异盒模型、弹性盒模型、倒影及阴影

一、怪异盒模型 怪异盒模型 .reddiv { width: 200px; height: 200px; background-color: red; box-sizing: border-box; border: 20px b...
  • Erosvan
  • Erosvan
  • 2016-09-24 09:27
  • 2066

text-shadow可以用来设置文本的阴影效果

文本阴影text-shadow text-shadow可以用来设置文本的阴影效果。 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; ...
  • baidu_35738377
  • baidu_35738377
  • 2016-09-06 09:21
  • 1564

wpf textbox中输入文本下面呈现倒影效果

呈现效果如下图所示 实现源码如下:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    ...
  • soft_123456
  • soft_123456
  • 2016-11-07 10:40
  • 455

GDI+ 在Delphi程序的应用 -- 可调节的文字阴影特效

        利用GDI+输出文字阴影效果有多种方法,最简单的就是第一次输出有偏移的灰色文字,第二次输出正常文字。下面是仿C#文字输出例子里的代码片断,输出了这种带阴影的文字:  serifFontFamil...
  • maozefa
  • maozefa
  • 2007-12-17 23:04
  • 10450

css中的多样化文本阴影:text-shadow

/*text-shadow:添加多样化的文本阴影*/ /*text-shadow:length||length||opacity||color:左右偏移距离||上下偏移距离||模糊度||阴影颜色*/ p[lang="a"]{ font-family: "微软雅黑&quo...
  • june_ruikang
  • june_ruikang
  • 2016-03-28 14:01
  • 576

浅谈CSS3新特性——文字阴影text-shadow、阴影box-shadow和倒影box-reflect

利用border属性: 以下三角为例,把左、右、下边框设置为toumse #triangle { width: 0; height: 0; border-width: 20px; border-style: solid; border-col...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-03-01 12:00
  • 635

box-shadow是向盒子添加阴影

box-shadow是向盒子添加阴影。支持添加一个或者多个。 很简单的一段代码,就实现了投影效果,酷毙了。我们来看下语法: box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍: 注意:inset 可以写...
  • baidu_35738377
  • baidu_35738377
  • 2016-08-31 15:05
  • 731

CSS3盒子阴影 box-shadow属性

第一:box-shadow的语法以及参数: box-shadow 属性可以使用一个或者多个阴影,如果使用多个必须用,隔开。 box-shadow:none |[inset x-offset y-offset blur-radius spread-radius color],[inset x-of...
  • sinat_16073327
  • sinat_16073327
  • 2015-05-04 21:08
  • 1410
    个人资料
    • 访问:88845次
    • 积分:1812
    • 等级:
    • 排名:千里之外
    • 原创:91篇
    • 转载:19篇
    • 译文:0篇
    • 评论:2条