一、文本阴影效果
方法一:
显示字体时,根据要求,为文字阴影添加颜色以增强网页的吸引力,这时就需要用到CSS3样式中的text-shadow属性。
text-shadow:阴影水平偏移值(可正负);阴影垂直偏移值(可正负);阴影模糊值;阴影颜色。后两个属性可选。
<body>
<p align:center style="text-shadow:0.1em 2px 10px blue;font-size:80px;">这是TextShadow的阴影效果</p>
</body>
效果图如下:
方法二:利用z-index设置阴影效果
<style type="text/css">
.shadow1{
font-family: "微软雅黑";
font-size: 60px;
font-weight: bold;
position: relative;
z-index: 1;
}
.shadow2{
color: #aaaaaa;
font-family: "微软雅黑";
font-size: 60px;
font-weight: bold;
position: relative;
top: -1.16em;
left: 0.1em;
z-index: 0;
}
</style>
<body>
<div class="shadow1">定位阴影效果</div>
<div class="shadow2">定位阴影效果</div>
</body>
二、文本溢出效果
text-overflow属性用来定义当文本溢出时是否显示省略号,要实现溢出产生省略号的效果,还需要定义:强制文本在一行显示(white-space:nowrap)以及溢出内容为隐藏(overflow:hidden)。
text-overflow:clip (不显示省略号标记,只裁切)| ellipsis(显示省略号标记)。
<body>
<style type="text/css">
.democlip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc}
.demoellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc}
</style>
<h2> text-overflow:clip</h2>
<div class="democlip">不显示省略号标记,而只是简单的裁切</div>
<h2> text-overflow:ellipsis</h2>
<div class="demoellipsis">显示省略号标记,不是简单的裁切</div>
</body>
效果图如下: