CSS实现文字凹凸效果

news2025/7/6 5:00:12
  1. 使用两个div分别用来实现凹凸效果；
  2. text-shadow语法
    text-shadow: h-shadow v-shadow blur color;
    h-shadow：必需。水平阴影的位置。允许负值。
    v-shadow ：必需。垂直阴影的位置。允许负值。
    blur：可选，模糊的距离。
    color：可选，阴影的颜色。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字效果</title>
    <style>
        body {
            background-color: #ccc;
        }
        div {
            color: #ccc;
            font: 700 80px "微软雅黑";
        }
        div:first-child {
            text-shadow: 1px 1px 1px #000, 
                -1px -1px 1px #fff;
        }
        div:last-child {
            text-shadow: -1px -1px 1px #000, 
                1px 1px 1px #fff;
        }
    </style>
</head>
<body>
    <div>
        曾经沧海难为水
    </div>
    <div>
        除却巫山不是云 
    </div>
</body>
</html>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用chatgpt写insar地质灾害的论文，重复率只有1.8%，chatgpt4.0写论文不是梦

用chatgpt写insar地质灾害的论文，重复率只有1.8%，chatgpt4.0写论文不是梦

突发奇想&#xff0c;想用chatgpt写一篇论文&#xff0c;并看看查重率&#xff0c;结果很惊艳&#xff0c;说明是确实可行的&#xff0c;请看下图。 下面是完整的文字内容。 InSAR (Interferometric Synthetic Aperture Radar) 地质灾害监测技术是一种基于合成孔径雷达…
阅读更多...
【小程序从0到1】小程序常用组件一览

【小程序从0到1】小程序常用组件一览

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f6e0;目前正在学习的是&#x1f525;React/小程序React/小程序React/小程序&am…
阅读更多...
Linux- 系统随你玩之--玩出花活的命令浏览器-双生姐妹花

Linux- 系统随你玩之--玩出花活的命令浏览器-双生姐妹花

文章目录1、背景2、命令浏览器-双生姐妹花2.1、姐妹花简介2.2 、验名正身2.3、常用功能选项3、常用实操3.1、发送请求获取文件3.1.1、抓取页面内容到一个文件中3.1.2、多个文件下载3.1.3、下载ftp文件3.1.4、断点续传3.1.5、上传文件3.1.6、内容输出3.2 、利用curl测试接口3.3 …
阅读更多...
数学建模—聚类(matlab、spss）K均值 Q型聚类 R型聚类

数学建模—聚类(matlab、spss）K均值 Q型聚类 R型聚类

文章目录一、K均值二、Q型聚类三、R型聚类聚类三种方法&#xff1a; 【说明】 1、三种方式输入矩阵行为个案&#xff0c;列为变量 量纲不同需要预处理&#xff0c;一般使用zscore() zscore()标准化为对每一列操作减去均值除以标准差 2、k均值需要自己确定k取值。Q、R型聚类需要…
阅读更多...
Echarts图表自适应？你可以这样做

Echarts图表自适应？你可以这样做

一、图表变形 使用 Echarts 绘制图表时&#xff0c;可能会遇到变形的问题。如下图&#xff1a; 其原因是 Echarts 在初始化实例的时候&#xff0c;对应 dom 元素的宽高还没有确定。 解决方案也很简单&#xff1a; 监听对应 dom 元素&#xff0c;如果大小发生变化&#xff0c;调…
阅读更多...
改哭了，终于解决了Cannot read properties of undefined (reading ‘parseComponent‘）

改哭了，终于解决了Cannot read properties of undefined (reading ‘parseComponent‘）

Vue中eslint报错的修改&#xff0c;绝对有效&#xff01;&#xff01;&#xff01; Syntax Error: TypeError: Cannot read properties of undefined (reading parseComponent)You may use special comments to disable some warnings. Use // eslint-disable-next-line to ig…
阅读更多...
Vue-Router的使用

Vue-Router的使用

目录 一、什么是路由&#xff1f; 二、在vue中如何使用路由&#xff1f; 三、vue-router的搭建 3.1 什么是hash和history模式&#xff1f; 四、路由的基本使用 2.1 router-view 2.1.1 命名视图 2.2 router-link 三、路由的参数 3.1 query参数 3.2 params参数 四、编…
阅读更多...
4.网络爬虫—Post请求(实战演示)

4.网络爬虫—Post请求(实战演示)

网络爬虫—Post请求实战演示POST请求GET请求POST请求和GET请求的区别获取二进制数据爬[百度官网](https://www.baidu.com/)logo实战发送post请求百度翻译实战使用session发送请求模拟登录17k小说网常见问题前言&#xff1a; &#x1f4dd;​&#x1f4dd;​此专栏文章是专门针对…
阅读更多...
uniapp 开发H5打包微信小程序样式失效的解决之道

uniapp 开发H5打包微信小程序样式失效的解决之道

使用uniapp开发H5&#xff0c;样式已经按照UI设计稿全部实现。但是在打包微信小程序调试的时候&#xff0c;遇到很多样式失效的问题。问了度娘很久&#xff0c;并没有完全解决样式失效的问题。于是自己按照从度娘上查到的方法去进行组合尝试&#xff0c;最终样式失效问题得到了…
阅读更多...
vue项目 移动端适配——rem

vue项目 移动端适配——rem

做移动端的适配我们就是要考虑&#xff0c;对于不同大小的手机屏幕&#xff0c;怎么动态改变页面布局中所有盒子的宽度高度、字体大小等。 这个问题我们可以使用相对单位rem。 那么什么是 rem&#xff1f; rem&#xff08;font size of the root element&#xff09;是指相对…
阅读更多...
VUE项目中调用高德地图

VUE项目中调用高德地图

前言 相信大家或多或少都接触过在大屏的项目&#xff0c;在大屏项目中除了用到了echarts中的行政地图&#xff0c;街道地图也是很常见的&#xff0c;今天主要来说一下在vue中调用高德地图遇到的一些问题&#x1f92a;。 申请高德key 无论我们使用任何方式调用高德地图都需要…
阅读更多...
导航栏不变，切换局部页面的方法

导航栏不变，切换局部页面的方法

前言&#xff1a; 在写项目的时候&#xff0c;一直让我很头疼的问题&#xff0c;就是我的项目的导航栏不需要改变&#xff0c;但是点击导航栏需要切换页面。接下来我总结一下我能够想到的方法! 目录&#xff1a; 1.iframe标签嵌入页面自定义属性 2.利用display属性和排他思想…
阅读更多...
【Anime.js】——JavaScript动画库：Anime.js——学习笔记

【Anime.js】——JavaScript动画库：Anime.js——学习笔记

目录 一、搭建开发环境 二、基本功能和使用 开始制作动画 动画属性 三、anime.stagger——交错动画 四、timeline——时间轴 五、控制、回调与助手 一、控制 二、回调 三、助手 六、easings——动画运动曲线 七、SVG动画 官网定义&#xff1a; anime.js 是一个简便的J…
阅读更多...
Java二次开发海康SDK-对接门禁机

Java二次开发海康SDK-对接门禁机

写在最前SDK版本&#xff1a;CH-HCNetSDKV6.1.6.45_build20210302_win64参考文档&#xff1a;海康SDK使用手册_V6.1对接测试设备型号&#xff1a;DS-K1T671M设备序列号&#xff1a;E50247795业务目标使用门禁设备实现对人脸的抓拍&#xff0c;将抓拍的人脸与其对应的数据进行上…
阅读更多...
用Pytorch构建一个喵咪识别模型

用Pytorch构建一个喵咪识别模型

本文参加新星计划人工智能(Pytorch)赛道&#xff1a;https://bbs.csdn.net/topics/613989052 目录 一、前言 二、问题阐述及理论流程 2.1问题阐述 2.2猫咪图片识别原理 三、用PyTorch 实现 3.1PyTorch介绍 3.2PyTorch 构建模型的五要素 3.3PyTorch 实现的步骤 3.3.…
阅读更多...
重新学习Vue，了解一下Vue的故事和核心特点

重新学习Vue，了解一下Vue的故事和核心特点

vueVue的由来Vue是什么1.响应的数据绑定2.可组合视图组件3.虚拟DOM4.MVVM模式5.声明式渲染总结Vue的由来 大家应该都知道VUE是尤大大尤雨溪开发出来的&#xff0c;尤大大专业不是计算机&#xff0c;而是室内艺术专业。后来尤大大到帕森斯设计学院进修艺术研究硕士学位&#xf…
阅读更多...
猿创征文｜【HTML】标签学习之路

猿创征文｜【HTML】标签学习之路

&#x1f496;目录 一、HTML语法规范 1.基本语法概述 2.标签关系 二、HTML基本结构标签 1.第一个HTML页面 2.HTML基本结构标签总结 一、HTML语法规范 1.基本语法概述 html是由尖括号包围的关键词&#xff0c;列如&#xff1a;<html>。html标签通常是成对出现的&a…
阅读更多...
前端微信小程序开发基础

前端微信小程序开发基础

文章参考&#xff08;黑马小程序教学视频&#xff09;仅供参考与学习 简介 小程序和普通页面开发的区别 运行环境不同 网页运行在浏览器中&#xff0c;小程序运行在微信环境中 API不同 由于运行环境不同&#xff0c;所以小程序中&#xff0c;无法调用DOM和BOM的API. 但是…
阅读更多...
如何使用 CSS 使表格居中（快速指南）

如何使用 CSS 使表格居中（快速指南）

在网页设计中使用表格有一段有趣的历史。在采用 CSS 之前&#xff0c;表格不仅仅用于以传统方式显示表格数据练习列表&#xff0c;而是更常用于控制完整的页面布局。 那时&#xff0c;HTML 表格用于定义网页的结构和视觉外观&#xff0c;其中表格的位置可以直接在 HTML 中指定…
阅读更多...
input详解之文件上传

input详解之文件上传

input 全部类型 常用的并且能为大多数浏览器所识别的类型大概有&#xff1a;text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。 1、一般类型 <!-- text类型 文本框 默认…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023