设置文本阴影和溢出效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35768238/article/details/79958047

一、文本阴影效果

      方法一:

        显示字体时,根据要求,为文字阴影添加颜色以增强网页的吸引力,这时就需要用到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>

  效果图如下:

      


阅读更多

没有更多推荐了,返回首页