蓝桥杯Web应用开发-CSS3 新特性【练习三:文本阴影】

文本阴影

text-shadow 属性

给文本内容添加阴影的效果。

文本阴影的语法格式如下:

html 复制代码
text-shadow: x-offset y-offset blur color;

• x-offset 是沿 x 轴方向的偏移距离,允许负值,必须参数。

• y-offset 是沿 y 轴方向的偏移距离,允许负值,必须参数。

• blur 是阴影的模糊程度,可选参数。

• color 是阴影的颜色,可选参数。

我们来举个例子吧!

新建一个 index4.html 文件,在其中写入以下内容。

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        font-size: 50px;
        color: rgb(0, 153, 255);
        text-shadow: 4px 4px 3px rgb(0, 255, 179);
      }
    </style>
  </head>
  <body>
    <div>示例内容</div>
  </body>
</html>
相关推荐
LiuMingXin23 分钟前
可能是你极易忽略的Nginx知识点
前端
曾几何时`34 分钟前
字符串(七)409. 构造出来的最长回文串
java·前端·javascript
小小鸟00840 分钟前
移动端适配总结
前端
LYFlied1 小时前
CSR与SSR:前端渲染方式详解
前端·性能优化·ssr·csr·首屏渲染·前端页面渲染
天天扭码1 小时前
京东前端开发实习生 一面
前端·网络协议·面试
董世昌411 小时前
JavaScript 变量声明终极指南:var/let/const 深度解析(2025 版)
java·服务器·前端
sorryhc1 小时前
Vite开发环境按需编译是怎么实现的?
前端·javascript·vite
nnnnna2 小时前
props 、emits 、组件上的v-model(详细版)
前端·javascript
三年三月2 小时前
Tailwind CSS 入门介绍
前端
余生H2 小时前
前端技术新闻(WTN-1):React.js & Next.js 爆出 CVSS 10.0 级严重漏洞,历史风险回顾与代码级深度分析
前端·javascript·react.js