HTML5+CSS3从入门到精通 CSS3文本效果解析-职坐标

HTML5+CSS3从入门到精通 CSS3文本效果解析

沉沙 2018-07-25 来源：阅读 1142 评论 0

摘要：本篇教程探讨了CSS3文本效果，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了CSS3文本效果，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

1.文本阴影：text-shadow

text-shadow: 5px 10px 6px #FF0000;/*指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色*/

2.阴影效果：box-shadow：10px 10px 10px grey(颜色);

实例卡片效果：

<style>div.card {

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);/*左右两个阴影，rgba设置阴影透明度*/

text-align: center;/*文本字位于中间*/

}div.header {

background-color: #4CAF50;/*背景为绿色*/

color: white;/*文字为白色*/

padding: 10px;

font-size: 40px;

}div.container {

padding: 10px;

}</style></head><body><h2>卡片</h2><p>box-shadow 属性用来可以创建纸质样式卡片:</p><div class="card">

</div>

<p>January 1, 2016</p>

</div></div>/*div嵌套，将两个div装进一个大的div中*/</body>

图片卡片效果

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);/*与文字卡片设置相同*/

text-align: center;}div.container {

padding: 10px;

}</style></head><body><h2> 卡片</h2><p>box-shadow属性可以用来创建纸质样式卡片:</p><div class="polaroid">

<img src="rock600x400.jpg" alt="Norway" style="width:100%">/*将文字换成图片插入*/

<p>Hardanger, Norway</p>

</div></div></body>

效果看起来很棒吧，是不是像明信片那种feel，当你学会你也会做啦！

3.text -overflows属性(ellipsis,cilp)

该属性是文本溢出属性指定应向用户如何显示溢出内容，即在div宽度不够时，一处部分的不同处理方式。
text-everflow：ellipsis 超出范围部分省略号隐藏
text-everflow：cilp 超出部分直接截断

<style> div.test

{

white-space:nowrap;

width:12em; /*宽度有限*/

overflow:hidden; /*超出部分隐藏*/

border:1px solid #000000;/*设置边框颜色*/

}</style></head><body><p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p><p>div 使用 "text-overflow:ellipsis":</p>/*ellipsis超出部分隐藏*/<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div><p>div 使用 "text-overflow:clip":</p>/*cilp超出部分直接截断，只在宽度范围内显示*/<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div></body>

4.文本换行 word-break:break-word(break-all,keep-all)

break-warp:允许长文本换行
keep-all:长文本，比如长单词换行不拆分
break-all：长文本也直接拆分换行

p.test

{

width:11em;

border:1px solid #000000;

word-wrap:break-word;/*长文本拆分*/

}

<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.

The long word will break and wrap to the next line.</p>

thisisaveryveryveryveryveryverylongword直接换行被拆分开。

p.test1