text-shadow详解

text-shadow详解
属性定义及使用说明

text-shadow是CSS3中用于给文本添加阴影效果的属性。它允许您为文本内容添加一个或多个阴影,以增强视觉效果,创建立体感或装饰性文字外观。

语法
text-shadow: h-shadow v-shadow blur-radius spread-radius color [ , ... ];
注意事项
  • text-shadow 属性可以接受一个或多个阴影声明,每个声明之间用逗号 , 分隔。
  • 如果只想为文本创建一个简单的阴影效果,只需提供两个长度值(水平和垂直偏移)和一个颜色值即可。
  • 使用多个阴影效果时,后面的阴影会叠加在前面的阴影之上。
属性描述
h-shadow必需的。水平阴影偏移量。正数表示向右偏移,负数表示向左偏移。
v-shadow必需的。垂直阴影偏移量。正数表示向下偏移,负数表示向上偏移
blur-radius可选。阴影的模糊半径数值越大,阴影越模糊。若不指定,则无模糊效果。
color必需的。阴影的颜色。可以是任何有效的CSS颜色值,比如 red、#FF0000 或 rgba(255, 0, 0, 0.5)。
属性详解
  • h-shadow
    它是必需的,代表水平方向的阴影偏移量。值为正数时,阴影在元素的右侧;值为负数时,阴影在元素的左侧。

    <div class="container container1">水平偏移5px,垂直偏移0px,模糊半径0px,颜色为半透明黑色</div>
    <div class="container container2">水平偏移-5px,垂直偏移0px,模糊半径0px,颜色为半透明黑色</div>
    
    .container1 {text-shadow: 5px 0 rgba(0, 0, 0, 0.5);
    }
    .container2 {text-shadow: -5px 0 rgba(0, 0, 0, 0.5);
    }
    

    效果如下:
    在这里插入图片描述

  • v-shadow
    它是必需的,代表垂直方向的阴影偏移量。值为正数时,阴影在元素的下侧;值为负数时,阴影在元素的上侧。

    .container1 {text-shadow: 0 5px rgba(0, 0, 0, 0.5);
    }
    .container2 {text-shadow: 0 -5px rgba(0, 0, 0, 0.5);
    }
    

在这里插入图片描述

  • blur-radius
    它是可选的,代表阴影的模糊半径。值越大,越模糊。若不指定,则无模糊效果。

    ..container1 {text-shadow: 0 0 rgba(0, 0, 0, 0.5);
    }
    .container2 {text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    }
    .container3 {text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    

在这里插入图片描述

  • color
    必需的。阴影的颜色。可以是任何有效的CSS颜色值,比如 red、#FF0000 或 rgba(255, 0, 0, 0.5)。

    .container1 {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    }
    .container2 {text-shadow: 3px 3px 3px rgba(255, 0, 255, 0.5);
    }
    .container3 {text-shadow: 3px 3px 3px rgba(255, 255, 0, 0.5);
    }
    

    在这里插入图片描述

  • 多个阴影:
    在这里插入图片描述

核心代码:

.container1 {text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5), /* 第一个阴影 */ 4px 4px 5px rgba(255, 0, 0, 0.5); /* 第二个阴影 */
}
.container2 {text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5), /* 第一个阴影 */ 4px 4px 0 rgba(255, 0, 0, 0.5); /* 第二个阴影 */
}
  • 渐变模糊效果:

在这里插入图片描述

核心代码:

.container1 {background: linear-gradient(0deg, rgba(194, 143, 22, 1) 0%, rgba(255, 255, 0, 0.5) 73%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-shadow: 0 4px 20px rgba(24, 29, 36, 0.3);
}
  • 镂空文字:

在这里插入图片描述
核心代码:

.container1 {color: white;text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/640966.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yolov5_深度学习模型训练程序的暂停与恢复

问&#xff1a; 为什么要中断yolov5模型的训练&#xff1f; 答&#xff1a; 训练数据量大且过程漫长&#xff0c;电脑总要休息的嘛 简单直说&#xff1a; 1. 暂停 &#xff1a; 键盘输入&#xff1a; ctrl c这里以从第二次迭代中断为例&#xff1a; 2. 恢复模型训练 &am…

ChatGPT在线网页版(与GPT Plus会员完全一致)

ChatGPT镜像 今天在知乎看到一个问题&#xff1a;“平民不参与内测的话没有账号还有机会使用ChatGPT吗&#xff1f;” 从去年GPT大火到现在&#xff0c;关于GPT的消息铺天盖地&#xff0c;真要有心想要去用&#xff0c;途径很多&#xff0c;别的不说&#xff0c;国内GPT的镜像…

OpenCV-复数矩阵点乘ComplexMatrixDotMultiplication

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 需求说明 一般用到FFT&#xff0c;就涉及到复数的计算&#xff0c;为了便于调用&#xff0c;我自行封装了一个简单的复数矩阵点乘…

Linux I2C(二) - I2C软硬件架构

1&#xff0c;I2C的总线拓扑 2&#xff0c;I2C S/W topology linux kernel I2C framework使用如下的软件拓扑抽象I2C硬件&#xff08;我们可以一起领会一下其中的“设备模型”思想&#xff09;&#xff1a; 1&#xff09;platform bus&#xff08;/sys/bus/platform&#xff0…

空间转录组SODB数据库(补充)

SODB数据库 SODB facilitates comprehensive exploration of spatial omics data | Nature Methods https://db.cngb.org/stomics/ a–f&#xff0c; SODB的整体设计。六个六边形总结了SODB的六个特点。SODB包含各种类型的空间组学数据&#xff08;a&#xff09;&#xff0c…

# 从浅入深 学习 SpringCloud 微服务架构(四)Ribbon

从浅入深 学习 SpringCloud 微服务架构&#xff08;四&#xff09;Ribbon 段子手168 一、ribbon 概述以及基于 ribbon 的远程调用。 1、ribbon 概述&#xff1a; Ribbon 是 Netflixfa 发布的一个负载均衡器,有助于控制 HTTP 和 TCP客户端行为。 在 SpringCloud 中 Eureka …

【HCIP学习】重发布和路由策略

一、重发布&#xff08;路由引入&#xff09; 1、背景&#xff1a; 一个网络拓扑中存在多种不同的路由协议&#xff0c;为了使多种不同的路由协议间能相互通信&#xff0c;出现了路由引入 为啥会存在多种不同的网络&#xff1f; 例如&#xff1a;OSPF由于区域架构的限制&am…

IBM SPSS Statistics for Mac:强大的数据分析软件

IBM SPSS Statistics for Mac是一款功能强大的数据分析软件&#xff0c;专为Mac用户设计&#xff0c;提供了一系列专业的统计分析和数据管理功能。无论是科研人员、数据分析师还是学生&#xff0c;都能从中获得高效、准确的数据分析支持。 IBM SPSS Statistics for Mac v27.0.1…

怎么通过Javascript脚本实现远程控制一路开关

怎么通过Javascript脚本实现远程控制一路开关呢&#xff1f; 本文描述了使用Javascript脚本调用HTTP接口&#xff0c;实现控制一路开关。一路开关可控制一路照明、排风扇等电器。 可选用产品&#xff1a;可根据实际场景需求&#xff0c;选择对应的规格 序号设备名称1智能WiFi…

SEGGER Embedded Studio IDE移植FreeRTOS

SEGGER Embedded Studio IDE移植FreeRTOS 一、简介二、技术路线2.1 获取FreeRTOS源码2.2 将必要的文件复制到工程中2.2.1 移植C文件2.2.2 移植portable文件2.2.3 移植头文件 2.3 创建FreeRTOSConfig.h并进行配置2.3.1 处理中断优先级2.3.2 configASSERT( x )的处理2.3.3 关于系…

GEE:基于光谱距离度量方法的巴以冲突造成的地表覆盖变化检测

作者:CSDN @ _养乐多_ 本文将介绍如何在 Google Earth Engine (GEE) 平台中使用光谱距离度量方法进行地表覆盖变化检测,并以加沙地区为例,使用Sentinel2数据展示2023年3月和2024年3月的地表覆盖变化区域。 结果如下图所示, 文章目录 一、核心函数1.1 spectralDistance函数…

零门槛接入,开源的物联网超级中枢:ThingsBoard

ThingsBoard&#xff1a;重塑万物互联世界&#xff0c;无限可能拓展- 精选真开源&#xff0c;释放新价值。 概览 ThingsBoard是一款强大而灵活的开源物联网&#xff08;IoT&#xff09;平台&#xff0c;以其高度可扩展性和企业级功能赢得了全球开发者与企业的青睐。它无缝集成…