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

ゝ一世哀愁。 2022-08-22 15:13 189阅读 0赞

（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:

(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);

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关盒子阴影（HTML、CSS）

相关文本居中对齐(CSS、HTML)

相关 CSS3-文本阴影

相关 CSS3-盒子阴影

相关 CSS 文本阴影

相关 css文本对齐

相关 CSS中文本对齐方式-文本处理案例

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

相关 css3-文本阴影效果、凹凸效果

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