蓝桥杯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>
相关推荐
浮游本尊14 分钟前
React 18.x 学习计划 - 第八天:React测试
前端·学习·react.js
麦麦在写代码18 分钟前
前端学习1
前端·学习
sg_knight22 分钟前
微信小程序中 WebView 组件的使用与应用场景
前端·javascript·微信·微信小程序·小程序·web·weapp
凯子坚持 c1 小时前
生产级 Rust Web 应用架构:使用 Axum 实现模块化设计与健壮的错误处理
前端·架构·rust
IT_陈寒1 小时前
Python 3.12新特性实战:5个让你的代码效率翻倍的隐藏技巧!
前端·人工智能·后端
程序员小寒1 小时前
前端高频面试题之Vuex篇
前端·javascript·面试
网硕互联的小客服1 小时前
如何解决 Linux 文件系统挂载失败的问题?
linux·服务器·前端·网络·chrome
程序员爱钓鱼2 小时前
Python 编程实战 · 实用工具与库 — Flask 路由与模板
前端·后端·python
合作小小程序员小小店6 小时前
web开发,在线%超市销售%管理系统,基于idea,html,jsp,java,ssh,sql server数据库。
java·前端·sqlserver·ssh·intellij-idea
不爱学英文的码字机器6 小时前
重塑 Web 性能:用 Rust 与 WASM 构建“零开销”图像处理器
前端·rust·wasm