设置文本阴影和溢出效果

原创 2018年04月16日 16:35:39

一、文本阴影效果

      方法一:

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

  效果图如下:

      


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

CSS3 新增文本属性

text-overflow 设置或检索是否使用一个省略标记。有两个属性值,一个是clip,是默认属性,一个是ellipsis,内容溢出部分用身略好显示。要和over-flow:hidden和whi...
  • qq_27603235
  • qq_27603235
  • 2016年01月17日 11:44
  • 394

css3实现渐变、阴影、超出指定文本省略号显示等一些效果

1.实现边框圆角 :border-radius:5px 2.实现文字阴影 :text-shadow: .1em .1em .1em  #aaa  带有模糊效果的阴影                ...
  • guozh90
  • guozh90
  • 2013年12月05日 15:59
  • 2993

css3文字阴影和盒子阴影

本来主要讲解了一下css3的一些知识。其中包括圆角,透明,文字,盒阴影等一些比较常用的内容,注意,css3只支持IE9和IE9以上的浏览器。...
  • tuzhiaichitang
  • tuzhiaichitang
  • 2017年08月03日 11:19
  • 491

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

p{ font-size: 150px; font-family: "Microsoft Yahei"; text-align:...
  • gyq04551
  • gyq04551
  • 2016年11月21日 20:35
  • 1579

CSS3文字与字体:text-overflow 与 word-wrap、@font-face、文本阴影text-shadow

CSS3文字与字体 text-overflow 与 word-wrap text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。 语法: 但是text-ov...
  • xxssyyyyssxx
  • xxssyyyyssxx
  • 2016年11月11日 11:26
  • 502

ImageView阴影和图层效果

import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; i...
  • djun100
  • djun100
  • 2013年10月30日 22:07
  • 1745

《CSS3实战》笔记--文本阴影:text-shadow

text-shadow CSS3
  • Lovejulyer
  • Lovejulyer
  • 2016年04月23日 01:00
  • 6748

dataGrid 的单元格文本溢出显示省略号的效果

1.找到对应的easyui的themes的easyui.css,查找.datagrid-cell,.datagrid-cell-group,.datagrid-header-rownumber, .d...
  • qq_25717027
  • qq_25717027
  • 2017年09月04日 12:16
  • 204

text-shadow可以用来设置文本的阴影效果

文本阴影text-shadow text-shadow可以用来设置文本的阴影效果。 语法: text-shadow: X-Offset Y-Offset blur color; ...
  • baidu_35738377
  • baidu_35738377
  • 2016年09月06日 09:21
  • 1694

iOS_使用UIBezierPath对象实现视图控件的立体阴影效果和半透明背景效果

iOS_使用UIBezierPath对象实现视图控件的立体阴影效果和半透明背景效果
  • Sponge_CMZ
  • Sponge_CMZ
  • 2015年09月16日 19:14
  • 3603
收藏助手
不良信息举报
您举报文章:设置文本阴影和溢出效果
举报原因:
原因补充:

(最多只允许输入30个字)