CSS3 文本效果(text-shadow,box-shadow,white-space等)

2024-08-30 09:36

本文主要是介绍CSS3 文本效果(text-shadow,box-shadow,white-space等),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一 text-shadow

text-shadow 属性是 CSS3 中用于为文本添加阴影效果的工具。它可以增强文本的可读性和视觉吸引力,提供丰富的视觉效果

1 语法

text-shadow: offset-x offset-y blur-radius color;
  • offset-x:阴影相对于文本的水平偏移量。可以是正值(向右偏移)或负值(向左偏移)。
  • offset-y:阴影相对于文本的垂直偏移量。可以是正值(向下偏移)或负值(向上偏移)。
  • blur-radius(可选):阴影的模糊程度。值越大,阴影越模糊。可以省略,省略时阴影为锐利的边缘。
  • color:阴影的颜色。可以使用任何有效的颜色值,如 rgba、hex、color name 等。
h1
{text-shadow: 5px 5px 5px #FF0000;
}

在这里插入图片描述

  • 5px 5px:阴影相对于文本向右下偏移 5 像素。
  • 5px:阴影模糊半径为 4 像素。
  • #FF0000:阴影颜色。

2 多重阴影
可以通过逗号分隔多个阴影,以创建复杂的效果:

h2 {text-shadow: 1px 1px 2px rgba(0,0,0,0.5), -1px -1px 2px rgba(255,255,255,0.3);
}
  • 1px 1px 2px rgba(0,0,0,0.5):第一个阴影,向右下偏移 1 像素,模糊半径 2 像素,颜色为半透明黑色。
  • -1px -1px 2px rgba(255,255,255,0.3):第二个阴影,向左上偏移 1 像素,模糊半径 2 像素,颜色为半透明白色。

二 box-shadow属性

box-shadow 属性在 CSS 中用于为元素添加阴影效果。它可以创建深度感和视觉层次,使元素更具立体感。

1 语法

box-shadow: offset-x offset-y blur-radius spread-radius color inset;
  • offset-x:阴影相对于元素的水平偏移量。正值表示向右偏移,负值表示向左偏移。
  • offset-y:阴影相对于元素的垂直偏移量。正值表示向下偏移,负值表示向上偏移。
  • blur-radius(可选):阴影的模糊程度。值越大,阴影越模糊。省略时默认为 0,阴影边缘锐利。
  • spread-radius(可选):阴影的扩展半径。正值使阴影扩展,负值使阴影收缩。省略时默认为 0。
  • color:阴影的颜色。可以使用任何有效的颜色值,如 rgba、hex、color name 等。
  • inset(可选):如果指定,则阴影将显示在元素内部而不是外部。默认是外部阴影。
.box {box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}
  • 4px 4px:阴影相对于元素向右下偏移 4 像素。
  • 8px:阴影模糊半径为 8 像素。
  • rgba(0,0,0,0.3):阴影颜色为半透明黑色。
    在这里插入图片描述
    2 多重阴影
    可以使用逗号分隔多个阴影效果:
.box {box-shadow: 2px 2px 5px red, -2px -2px 5px rgba(125, 255, 96, 0.5);
}
  • 2px 2px 5px rgba(0,0,0,0.3):第一个阴影,向右下偏移 2 像素,模糊半径 5 像素,颜色为半透明黑色。
  • -2px -2px 5px rgba(255,255,255,0.5):第二个阴影,向左上偏移 2 像素,模糊半径 5 像素,颜色为半透明白色。
    在这里插入图片描述
    3 内部阴影
    使用 inset 创建内部阴影:
.box {box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
  • inset:使阴影显示在元素内部。
  • 0 0 10px rgba(0,0,0,0.5):阴影没有偏移,模糊半径 10 像素,颜色为半透明黑色。
    在这里插入图片描述
    4 阴影扩展
    使用 spread-radius 进行阴影扩展:
.box {box-shadow: 0 0 10px 5px rgba(0,0,0,0.3);
}
  • 0 0 10px 5px:阴影没有偏移,模糊半径 10 像素,扩展半径 5 像素,使阴影比元素本身大。
  • rgba(0,0,0,0.3):阴影颜色为半透明黑色。
    在这里插入图片描述

三 text-overflow

text-overflow 是 CSS 属性,用于指定当文本溢出其容器时的处理方式。主要有以下几种值:

  • clip:默认值,文本超出容器时被裁剪,不显示溢出的部分。
  • ellipsis:文本超出容器时显示省略号(…),表示有更多内容被隐藏。
  • string:可以自定义溢出部分显示的字符串,适合支持的浏览器。

通常与 white-space 和 overflow 一起使用,例如:

.container {width: 100px;white-space: nowrap; /* 防止换行 */overflow: hidden;    /* 隐藏超出部分 */text-overflow: ellipsis; /* 溢出部分显示省略号 */
}

这样,当文本过长时,它会被裁剪并显示省略号。

四 word-wrap

word-wrap 是 CSS 的一个早期属性,用于控制长单词或 URL 是否在需要时被强制换行,以避免超出容器的宽度。

语法:

word-wrap: normal | break-word;
  • normal:这是默认值。浏览器在长单词或 URL 时不会强制换行,单词会在自然的换行点处换行。
  • break-word:浏览器会在需要时强制换行长单词或 URL,以防止文本溢出容器边界。

五 word-break

word-break 是一个 CSS 属性,用于控制文本在换行时的行为。它影响文本如何在块级元素中断行,尤其是在长单词或连续字符无法在正常换行点断开时的处理方式。

word-break: normal | break-all | keep-all;

属性值

  1. normal

定义:这是默认值。文本会在正常的换行点(例如空格或连字符)断行,不会在单词内断行。
适用情况:适用于大多数文本布局,保持文本在常规的换行规则下。

  1. break-all

定义:允许在任何字符之间断行,无论是单词还是单个字母。这意味着即使在单词中间也会强制换行。
适用情况:用于处理长字符串或单词,尤其是在不允许水平滚动条的情况下。例如,长的 URL 或长的连续字符(如汉字)需要强制换行。

  1. keep-all

定义: 只在允许的换行点断行(如空格),并且不会在单词中断行。适用于不希望在单词或字符之间断行的情况,尤其是中文文本。
适用情况:适用于中文、日文或韩文等东亚文字,这些语言通常不在单词中间断行。

六 white-space

white-space 属性在 CSS 中用于控制文本内空白字符的处理和换行行为。它影响元素中的文本如何显示和格式化。
属性值

  1. normal

描述:这是默认值。多个空格会被合并为一个,文本会自动换行以适应其容器。
适用场景:大多数情况下使用,如段落文本或一般文本块。
效果:

<div style="white-space: normal;">这是      一段  文本。这段文本会根据容器的宽度自动换行。
</div>
  1. nowrap

描述:多个空格会被合并为一个,但文本不会换行,会一直显示在一行内,直到容器边界。
适用场景:用于需要单行显示的元素,如按钮或导航条。

效果:

<div style="white-space: nowrap;">这是      一段  文本。这段文本不会换行,会继续在一行内显示。
</div>
  1. pre

描述:保留所有的空格和换行符,文本显示方式类似于 <pre> 标签的行为。

适用场景:需要精确控制文本格式的内容,如代码块或诗歌。
效果:

<div style="white-space: pre;">这是      一段  文本。这段文本的空格和换行符都会被保留。
</div>
  1. pre-wrap

描述:保留空格和换行符,但在需要时允许文本换行以适应容器的宽度。
适用场景:适用于需要保留文本格式,但又希望文本能够在容器内换行的情况。
效果:

<div style="white-space: pre-wrap;">这是      一段  文本。这段文本的空格和换行符会被保留,但会在需要时换行。
</div>
  1. pre-line

描述:合并多个空格为一个,但保留换行符。
适用场景:需要保留文本中的换行符,但不希望多余的空格影响布局。

效果:

<div style="white-space: pre-line;">这是      一段  文本。这段文本会保留换行符,但多余的空格会被合并。
</div>

使用建议

  • normal:适合大多数文本内容,需要自动换行的情况。
  • nowrap:用于需要保持在一行中的情况,如标签或导航菜单。
  • pre:适合代码、诗歌等需要准确格式的文本。
  • pre-wrap:适用于长文本,保留格式但允许换行。
  • pre-line:适合需要保留换行但合并空格的文本。

七 text-transform

text-transform 是一个 CSS 属性,用于控制文本的大小写转换。它允许你修改文本的显示样式,使其变成全大写、全小写、首字母大写等。
属性值

  1. uppercase

将所有字符转换为大写字母。

.uppercase {text-transform: uppercase;
}
  1. lowercase

将所有字符转换为小写字母。

.lowercase {text-transform: lowercase;
}
  1. capitalize

将每个单词的首字母转换为大写字母。

.capitalize {text-transform: capitalize; }
  1. none

取消所有 text-transform 的效果,文本保持原样。

.none {text-transform: none;
}

八 text-decoration

text-decoration 是一个 CSS 属性,用于设置文本的装饰效果,比如下划线、上划线或删除线
属性值

  1. underline

为文本添加下划线。

.underline {text-decoration: underline;
}
  1. overline

为文本添加上划线。

.overline {text-decoration: overline;
}
  1. line-through

为文本添加删除线(横线)。

.line-through {text-decoration: line-through;
}
  1. none

移除任何文本装饰效果。

.none {text-decoration: none;
}
  1. blink (不常用)

使文本闪烁。此值在许多现代浏览器中不再支持。

.blink {text-decoration: blink;
}

九 CSS实现单行或者多行文本溢出隐藏并且显示省略号

单行

 white-space: nowrap;   //不换行overflow: hidden;       //超出部分隐藏text-overflow: ellipsis;    //文本溢出显示省略号

多行

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
  • overflow: hidden;:隐藏超出容器的内容。
  • text-overflow: ellipsis;:在文本溢出时使用省略号表示。
  • display: -webkit-box;:使用 WebKit 特有的盒模型来控制文本显示。
  • -webkit-box-orient: vertical;:设置盒子的方向为垂直,允许文本换行。
  • -webkit-line-clamp: 5;:限制文本显示为最多 5 行,并在超出部分使用省略号。

这篇关于CSS3 文本效果(text-shadow,box-shadow,white-space等)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120443

相关文章

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

使用Python实现文本转语音(TTS)并播放音频

《使用Python实现文本转语音(TTS)并播放音频》在开发涉及语音交互或需要语音提示的应用时,文本转语音(TTS)技术是一个非常实用的工具,下面我们来看看如何使用gTTS和playsound库将文本... 目录什么是 gTTS 和 playsound安装依赖库实现步骤 1. 导入库2. 定义文本和语言 3

Python实现常用文本内容提取

《Python实现常用文本内容提取》在日常工作和学习中,我们经常需要从PDF、Word文档中提取文本,本文将介绍如何使用Python编写一个文本内容提取工具,有需要的小伙伴可以参考下... 目录一、引言二、文本内容提取的原理三、文本内容提取的设计四、文本内容提取的实现五、完整代码示例一、引言在日常工作和学

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

Java实现将Markdown转换为纯文本

《Java实现将Markdown转换为纯文本》这篇文章主要为大家详细介绍了两种在Java中实现Markdown转纯文本的主流方法,文中的示例代码讲解详细,大家可以根据需求选择适合的方案... 目录方法一:使用正则表达式(轻量级方案)方法二:使用 Flexmark-Java 库(专业方案)1. 添加依赖(Ma

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分