设置文本阴影和溢出效果

2023-10-31

一、文本阴影效果

      方法一:

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

  效果图如下:

      


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

设置文本阴影和溢出效果 的相关文章

  • 智商100能看懂,内观,生男生女,集体潜意识及智人2.0

    一 这一轮人类发展趋势从外到内 要内观世界 1 人的身体前面是阴 背后是阳 但人是向前走路的 也就是从阳往阴走的 所以人类发展的趋势是阴 也就是往女性化走 从外到内 要内观世界 从目前人类的文明来说 现在的人类比古代的人类来说 男性越来越向
  • 最新高频Android笔试题分享,最新高频安卓面试题目分享

    前言 伟人曾经说过 书是人类进步的阶梯 书中自有黄金屋 书中自有颜如玉 读书破万卷 下笔如有神 书是唯一不死的东西 书籍是伟大的天才留给人类的遗产 最近有很多朋友在我的公众号上提问 Android开发的经典入门教材和学习路线 Android
  • 基于VLC实现RTSP推流桌面(共享桌面)

    基于VLC实现RTSP推流桌面 共享桌面 一 添加VLC头文件和库文件 二 封装RTSPServer推流类 三 测试代码 不清楚推流大概原理的小伙伴 参考 设置VLC播放器进行RTSP推流桌面 共享桌面 这里以VLC 2 2 6版本为例 因
  • 怎么将pdf文件转换成图片?三种方法

    在实际的工作过程中 PDF是非常常见的文档存储格式 也是很多网站默认的保存格式 对于PDF文件来说 其具备很多其他文件格式没有的优势和特点 例如 在PDF文件中 其排版整齐且固定 浏览直观且方便 为工作的开展提供了诸多便利 另外 为了能够提
  • [计算机网络]简单入门HTTPS : 确保Web网站安全

    前言 今天也是刚好看到HTTPS 感觉HTTPS有许多需要总结的地方 这里也是花点时间给大伙总结下 今天会从下面几个点入手给大伙介绍 HTTPS如何解决现有的HTTP安全问题 和HTTP的区别 HTTPS建立连接的过程 HTTPS的缺点 其
  • android蓝牙BLE(二) —— 通信

    android BLE系列 android蓝牙BLE 一 扫描 android蓝牙BLE 二 通信 android蓝牙BLE 三 广播 一 蓝牙基础协议 想了解蓝牙通信之前 需要先了解蓝牙两个最基本的协议 GAP 和 GATT 1 GAP
  • FreeCAD是什么、如何下载(windows+0.18.4版本)和安装以及中文设置

    目录 一 FreeCAD是什么 二 如何下载FreeCAD 三 FreeCAD安装过程 四 如何设置成中文 一 FreeCAD是什么 我本意是想用Qt连接CAD实现CAD的二次开发 实现在qt界面改变参数同时CAD图纸上的尺寸发生相应变化
  • Linux之Web服务器配置(Apache)

    摘要 Web Service技术 能使得运行在不同机器上的不同应用无须借助附加的 专门的第三方软件或硬件 就可相互交换数据或集成 依据Web Service规范实施的应用之间 无论它们所使用的语言 平台或内部协议是什么 都可以相互交换数据
  • 基于stm32f103c8t6HAL库六路电磁寻迹智能车

    基于stm32f103c8t6HAL库六路电磁寻迹智能车 学习单片机第一次参加相关比赛 下面分享一些关于调车的心得 1 控制舵机 舵机是控制小车转向的器件 而PWM波可以控制舵机 占空比越大 舵机旋转角度越大 接下来我们打开cubemx配置
  • FreeSwitch常用命令

    1 通话相关 先打客户 再转坐席 没有录音 EslMessage elme client sendSyncApiCommand originate sofia gateway huawei 015011275853 bridge user

随机推荐

  • JDBC数据源配置及管理

    JDBC驱动程序 JDBC驱动程序组件为java程序连接不同数据库系统提供服务 它通常由数据库系统方开发提供或由第三方提供 下载对应不同数据库的JDBC 数据库连接信息配置 URL 连接数据库系统资源描述符 DriverClass 数据库系
  • 交付文档注意事项

    最近涉及到项目交付 编写了很多技术文档 但因为没有经验导致多次修改 尤其是客户和我们技术人员的关注点其实是不一样的 就导致我没有抓住重点 导致反复修改 这里总结下我的一些经验 文档与技术协议合同对应 就我所经历的项目 前期的技术要求和最后的
  • 十大必掌握C++11新特性

    简介 C 11 之前被称作C 0x 即ISO IEC 14882 2011 是目前的C 编程语言的正式标准 它取代第二版标准ISO IEC 14882 2003 第一版ISO IEC 14882 1998发布于1998年 第二版于2003年
  • OCR测试——字体和背景颜色

    测试目的 测试图片中字体颜色和背景颜色对文字识别的影响 一 测试图片选择 黑色字体 白色背景 黑色字体 橙色背景 绿色字体 黑色背景 绿色字体 白色背景 白色字体 绿色背景 白色字体 橙色背景 橙色字体 白色背景 混合色字体 混合色背景 二
  • c# 遍历文件夹下的.exe文件,找到主应用程序文件

    遍历文件夹下的文件 exe文件 public static string ForeachFiles string FilePath SearchOption AllDirectories 指遍历全部的子文件夹 所有都遍历一次 string
  • 见到的一篇IOCP流程 自己用demo实现了一下, 简单照抄,改动了一点点

    要分析的实例分为两个线程 分别是主线程 MAIN 还有一个是创建的线程 ServerThread 1 主函数完成初始化工作 1 1 主线程 HANDLE hCompletion CreateIoCompletionPort INVALID
  • 针对树莓派vnc连接被拒绝,树莓派固定ip后上不了网的问题

    三月份玩了会树莓派 实现树莓派小车的自动登录 自动连接wifi 固定ip和vnc远程连接 具体见之前的树莓派小车记录的博客里 昨天发现小车虽然可以连接wifi 固定ip 甚至能vnc连接但是没有网络 ping不通除了自身ip以外的任何地址
  • SpringBoot单元测试Mock静态方法

    这两天写单元测试碰到了一个问题 就是这个subnetmap里面的数据格式我不知道是怎么样的 所以直接mock掉返回自己指定的值吧 mockito库并不能 mock静态方法 需要依赖powermock这个库才能对静态方法mock 可以直接用这
  • fastadmin 配置完成后部署到服务器报找不到模块问题

    现象 本地直接安装的fastadmin框架可以正常运行 迁移到服务器或者给别人用的时候就不行了 跟这个问题差不多nginx配置了rewrite fastadmin后台首页可以访问 但一刷新会去首页 怎么办 FastAdmin问答社区 现象一
  • 代码走查和代码审查_21世纪的代码审查

    代码走查和代码审查 有句老话说 不要谈论宗教或政治 为什么 因为这些主题充满了强烈的见解 但客观答案却很薄弱 一个人的确定性就是另一个人的怀疑 别人的常识只是对那些持不同看法的人的先验偏见 可悲的是 与这些有争议的主题进行对话会产生比光更多
  • 三元运算符 使用

    三元运算符 三元表达式判断闰年 var b 2012 var year b 4 0 b 100 0 闰年 平年 console log year 判断奇数偶数 var a prompt 输入你要判断的数 var a 3 var res a
  • 使用docker部署springboot项目并连接上mysql数据库

    使用docker部署springboot项目并连接上mysql数据库 预览 http 8 142 6 23 screen 项目开源地址 前端vue https gitee com gaohan888 echarts learning tre
  • 旧版vue-cli脚手架Webpack3项目如何升级Webpack4

    vue cli脚手架出到了4 3 1版本 目前主推通过create命令来新建项目 与过去的vue cli2的init命令不同的是 create命令脚手架建完的项目webpack为4 而init采用的模板中引用的webpack版本还是3 单独
  • 程序人生-Hello’s P2P

    第一章 概述 1 1 Hello 简介 1 1 1 P2P Program to Process 从程序到进程 P2P指Hello c从源程序到进程的过程 Hello c经过预处理器的编译预处理 得到预编译文件Hello i Hello i
  • Java多对象的内存情况分析

    这种情况指的是在一个类中创建了多个对象 最先创建的对象直接指向类 后面创建的对象则指向第一个创建的对象 那么针对这种情况就会出现如下情况 1 照旧生成栈内存和堆内存 但是堆内存只会生成一个包含类中所有属性和方法的内存地址 2 因为后面创建的
  • 前端面试题集锦(6)

    目录 1 常见的兼容问题有哪些 1 1 获取标签节点 1 2 获取卷去的高度 1 3 获取样式 1 4 事件侦听器 1 5 事件解绑 1 6 事件对象的获取 1 7 阻止默认行为 1 8 阻止事件冒泡 1 9 获取精准的目标元素 1 10
  • Eclipse的Team菜单中没有SVN选项的解决方法

    Eclipse开发项目时想使用SVN来管理 但是发现Team gt Share Project菜单中没有SVN选项 只有一个GIT选项 如下图 解决方法 1 菜单栏Help gt Eclipse Marketplace 2 打开如下对话框
  • SQL 常用&高级 教程

    用SELECT INTO 或INSERT INTO复制表结构 数据 MySQL 数据库不支持 SELECT INTO 语句 但支持 INSERT INTO SELECT MySQL可以使用以下语句来 1 拷贝表结构及数据 CREATE TA
  • 【学习笔记】R数据科学(R for Data Science)—第3章 使用dplyr进行数据转换

    dplyr包是tidyverse中的一个核心R包 dplyr的5个核心函数 按值筛选观测 filter 对行进行重新排序 arrange 按名称选取变量 select 使用现有变量的函数创建新变量 mutate 将多个值总结为一个摘要统计量
  • 设置文本阴影和溢出效果

    一 文本阴影效果 方法一 显示字体时 根据要求 为文字阴影添加颜色以增强网页的吸引力 这时就需要用到CSS3样式中的text shadow属性 text shadow 阴影水平偏移值 可正负 阴影垂直偏移值 可正负 阴影模糊值 阴影颜色 后