零基础建站培训介绍

当前位置:

CSS3如何设置文字阴影与自动换行

1、CSS3设置文字一个阴影

CSS3如何设置文字阴影与自动换行

在CSS3中使用text-shadow属性来给文字添加阴影效果


h1
{
text-shadow: 5px 5px 5px #FF0000;
}

语法解释:

描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的半径。(越大越模糊)
color 可选。阴影的颜色。

2、CSS3设置文字多个阴影

text-shadow可以给文字设置多个阴影,并且设置不同的颜色。不同颜色的属性使用逗号隔开。
CSS3如何设置文字阴影与自动换行2

h1
{
text-shadow: 5px 5px 5px #FF0000,10px 10px 5px red,,20px 20px 5px green,
}

3、CSS3控制浏览器自动换行

CSS3如何设置文字阴影与自动换行3

默认情况下,浏览器换行时,中文不会让逗号、句号在一行的最前面。英文不会拆分长单词。就会造成排版时不好看。在CSS3中使用word-break 属性规定自动换行的处理方法。通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。
语法


p{word-break: normal|break-all|keep-all;}
描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。允许单词拆分
keep-all 只能在半角空格或连字符处换行。

4、CSS3控制允许长单词/URL换行到下一行

默认情况下长URL是不会自动换行的。我们可以使用word-wrap属性来让它自动换行。CSS3如何设置文字阴影与自动换行4


p.test {word-wrap:break-word;}
描述
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。

相关阅读:

[html教程] 第五课:HTML换行标签,HTML水平线标签,HTML注释标签

CSS控制强制不换行/自动换行/强制换行

html强制换行与强制不换行

HTML换行标签与水平线标签

CSS如何设置DIV边框阴影和图片阴影效果

上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注