整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS文本阴影

天我发了几篇关于CSS文字效果的文章,接下来给大家介绍一下如何使用CSS完成文本阴影效果。

该 text-shadow 属性可用于为您的文本提供美丽的阴影效果。使用此属性,可以为HTML元素的文本提供不同类型的阴影效果。

您可以为此属性的四个参数赋予值,如下所示。

CSS

text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];

这些参数定义如下。

  1. 水平偏移(必需): 这是阴影与文本的水平距离。正水平偏移将阴影置于文本的右侧,而负水平偏移将阴影置于文本的左侧。
  2. 垂直偏移(必需): 这是文本上方或下方阴影的垂直距离。正垂直偏移将阴影置于文本的底部,而负垂直偏移将阴影置于文本的顶部。
  3. 模糊半径(可选): 给予模糊半径使阴影模糊。较高的模糊半径值将使阴影更加模糊和扩展,从而使其更大更轻。另一方面,较小的模糊半径值将导致更清晰,更亮和更少扩展的阴影。不允许使用负值。
  4. color(可选): 指定阴影的颜色。

让我们通过一个例子来理解这一点。以下代码将更改文本的字体大小和颜色。

HTML

<p>Text Shadow</p>

CSS

p {
 font-family: 'Muli', sans-serif;
 font-size: 47px;
 font-weight: 900;
 color: #CFC547;
}

现在,考虑到上述每个参数的影响,让我们为这个文本画一个阴影。

水平偏移

如果只想在文本的左侧或右侧使用阴影,则给出垂直偏移0的值。

要将阴影置于文本的右侧,请给出正的水平偏移值。

CSS

.text {
	text-shadow: 3px 0 rgba(81,67,21,0.8);
}

负值会将阴影置于框的左侧。

CSS

.text {
	text-shadow: -3px 0 rgba(81,67,21,0.8);
}

在上面的代码中, rgba(81,67,21,0.8) 是阴影的颜色。如果没有给出阴影颜色,则文本阴影的颜色将与文本的颜色相同。

垂直偏移

与上面的情况相同,如果您希望阴影仅位于文本的顶部或底部,请给出0水平偏移。

正垂直偏移值将阴影置于文本的底部。

CSS

.text {
	text-shadow: 0 4px rgba(81,67,21,0.8);
}

负值会将阴影置于文本的上方。

CSS

.text {
	text-shadow: 0 -4px rgba(81,67,21,0.8);
}

如果你想要一个右下角的阴影,那么给出水平偏移和垂直偏移都是正的。

CSS

.text {
	text-shadow: 3px 4px rgba(81,67,21,0.8);
}

模糊半径

模糊使阴影看起来真实。要为阴影提供模糊效果,请给它一些正方形模糊半径。

CSS

.text {
	text-shadow: 3px 4px 7px rgba(81,67,21,0.8);
}

颜色

您可以通过提供任何颜色名称或颜色值(如rgba或hsla)为阴影指定颜色。如果将不透明度设置为小于1的值(如上面的情况,不透明度设置为0.8),它会为阴影提供漂亮且更自然的外观。

给多个阴影

您还可以为某些文本提供多个阴影,以提供不同的阴影效果。这些值以逗号分隔给 text-shadow属性。

例如,请考虑以下代码。

CSS

.text {
 text-shadow: 3px 0px 7px rgba(81,67,21,0.8), -3px 0px 7px rgba(81,67,21,0.8);
}

这里,为text-shadow 属性提供了两个阴影值 ,以逗号分隔。第一个值将在文本的右侧绘制阴影,而第二个值将在文本的左侧绘制阴影。

考虑一些给出多个阴影的例子。

整理不易,请大家多多关注支持我,谢谢!

家都知道,现在普遍通用的就是 HTML5 和 CSS3 了,今天就带大家看看 CSS3 的效果。

CSS3 文本效果

CSS3中包含几个新的文本特征。下面苏苏老师会给大家讲解以下文本属性:

text-shadow

box-shadow

text-overflow

word-wrap

word-break

浏览器支持

CSS3 的文本阴影

CSS3 中,text-shadow属性适用于文本阴影。

(效果图)

我们指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色:

实例教程:

1.给标题添加阴影

h1

{

text-shadow: 5px 5px 5px #FF0000;

}

CSS3 box-shadow属性,CSS3 中 CSS3 box-shadow 属性适用于盒子阴影

div

{

box-shadow: 10px 10px 5px #888888;

}

2.接下来给阴影添加颜色

div

{

box-shadow: 10px 10px grey;

}

3.接下来再给阴影添加一个模糊效果

div

{

box-shadow: 10px 10px 5px grey;

}

你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果

代码如下

#boxshadow {

position: relative;

b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

pa dding: 10px;

bac kground: white;

}

#boxshadow img {

width: 100%;

border: 1px solid #8a4419;

border-style: inset;

}

#boxshadow::after {

content: '';

position: absolute;

z-index: -1; /* hide shadow behind image */

box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%;

left: 15%; /* one half of the remaining 30% */ height: 100px;

bottom: 0;

}

阴影的一个使用特例是卡片效果

div.card {

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

text-align: center;

}

CSS3 Text Overflow属性,是CSS3文本溢出属性指定应向用户如何显示溢出内容。

代码如下

p.test1 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: clip;

}

p.test2 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: ellipsis;

}

CSS3的换行

如果某个单词太长,不适合在一个区域内,它扩展到外面:

CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字:

CSS代码如下

p {word-wrap:break-word;}

CSS3 单词拆分换行属性指定换行规则

CSS代码如下

p.test1 {

word-break: keep-all;

}

p.test2 {

word-break: break-all;

}

新文本属性

总结:CSS3真的很好用!很多CSS2实现不了的都能用CSS3实现~

有什么问题和建议可以私信小编:"666"

"巧用CSS ::before 创建带透明阴影效果的图标按钮:实战指南"

引言

在Web前端设计中,CSS的伪元素`::before`为我们提供了无尽的创新可能,尤其在创建独特且富有交互性的UI组件时,例如带有透明阴影效果的图标按钮。本文将深入解析如何利用`::before`伪元素结合CSS3的阴影属性,实现一种新颖、美观且实用的图标按钮设计,让你的用户界面更加生动和有趣。

---

一、理解CSS ::before 伪元素

css
.button {
  position: relative;
}
.button::before {
  content: "";
  /* 这里将添加用于生成图标的样式 */
}

`::before`是CSS中的一个伪元素,它可以在元素内容的前面插入额外的内容。这意味着我们可以在不修改HTML结构的前提下,通过CSS添加样式化的图形或内容。这对于创建自定义图标按钮极为有用。

二、创建基础图标按钮

css
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50; /* 绿色背景 */
  color: white;
  border: none;
  cursor: pointer;
}

.button::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}

这段代码创建了一个带有白色三角形图标的绿色按钮。

---

三、为图标按钮添加透明阴影效果

css
.button:hover::before {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

若要实现更高级的效果,比如让阴影随着鼠标悬停而变化,我们可以使用`:hover`伪类:

四、拓展应用场景与个性化定制

- **自定义形状图标**:只需修改`::before`内的`border`属性即可创建不同形状的图标。


- **动态过渡效果**:结合`transition`属性,可以为阴影效果添加平滑过渡。

- **响应式设计**:针对不同屏幕尺寸,调整阴影大小及透明度,提升用户体验。

---

结论

通过巧妙地运用CSS `::before`伪元素以及`box-shadow`属性,我们成功地制作出了一款具有透明阴影效果的图标按钮。这样的实践不仅提升了网站或应用的视觉吸引力,同时也增强了其交互性。希望本篇指南能帮助你在实际项目中灵活运用这些技巧,创作出更多令人眼前一亮的设计。在前端的世界里,想象力和技术的融合才是无限可能的源泉。