H5课后作业实现盒子阴影和文字阴影

最新推荐文章于 2023-11-22 16:12:44 发布
最新推荐文章于 2023-11-22 16:12:44 发布
阅读量89 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69190401/article/details/124547796
版权

<!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>Document</title>
    <style>
         div{
            width: 300px;
            height: 150px;
            background-color: bisque;
            border-radius: 20%;
            box-shadow: 10px 10px 10px rgb(67, 67, 67);
        }
       div{
            font-size:60px;
            color: violet;
            font-weight: 700;
            font-family: 隶书;
            text-align: center;
            text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6); 
        }
       
    </style>
</head>
<body>
    <div>张菲菲</div>
</body>
</html>

别爱妹妹了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
谷歌浏览器插件—— Ajax Interceptor
03-16
一个用于修改 ajax 请求响应的 chrome 扩展，修改ajax请求数据
H5期末大作业，H5期末课程设计
11-10
自己写的h5期末作业，主要是介绍英雄联盟的一些电竞选手。 ①使用的技术：HTML5+CSS3+JavaScript，应用HTML5标签和CSS3特效（包括边框、背景、投影、变形、动画、布局、媒介查询等CSS3样式在页面中的应用）进行页面...
使用css实现水珠/水滴效果
公众号 @ 桃小瑞
12-07 1632
使用 css 实现水珠/水滴效果
ajax 设置全局拦截器
shiyutim
02-21 5388
ajax 设置全局拦截器 在使用 jQuery 的项目中，如果要对所有的请求统一设置一些参数的话，可以设置拦截器 $.ajaxSetup。 $.ajaxSetup的参数和 $.ajax 的参数一样。举个例子，如果你要对所有的请求添加一个 name参数的话，可以进行如下配置： $.ajaxSetup({ data: { name: 'xxx' } }) 这样，以后所有的请求都会带上 na...
JavaScript 专项练习（三）
kiku
10-11 1836
1、写出程序运行的结果（） var k = 0; for(var i=0,j=0;i<10,j<6;i++,j++){ k += i + j; } console.log(k) 答案：30，解析： 考察知识点：逗号表达式只有最后一项是有效的，即对于i<10,j<6; 来说，判断循环是否结束的是j < 6；而对于 j<6,i<10; 来说，判断循环是否结束的是 i < 10。 k = 0+0=0 1+1+0=2 2+2+2=6 3+3+6=12 4+4
Axios请求（对于ajax的二次封装）——Axios拦截器与错误处理
XSL_HR的博客
04-16 1471
一篇文章带你学会Axios拦截器与错误处理
使用CSS3实现圆角,阴影,透明
09-25
在本文中，我们将深入探讨如何使用CSS3来实现圆角、阴影和透明效果，这些都是现代网页设计中不可或缺的元素。 1. **圆角** CSS3通过`border-radius`属性引入了创建圆角的能力，极大地简化了以前需要借助图片或复杂...
css3和h5实现王者荣耀官网
08-25
本项目以“仅使用CSS3和H5实现的王者荣耀官网”为例，深入探讨如何利用这两种技术打造出具有视觉冲击力和用户体验优良的网页。下面我们将详细解析这一过程中的关键知识点。 一、HTML5基础与特性 HTML5是超文本标记...
h5移动端调用微信和支付宝支付的实现
最新发布
12-29
改文档中主要说明了h5移动端调用微信和支付宝支付的实现，按照readme说明即可
H5实现仿flash效果的实现代码
08-29
在H5实现仿flash效果的实现代码中，CSS部分主要用于实现图片和按钮的样式。例如，使用CSS可以实现图片的旋转、缩放、透明度等效果。 六、总结 H5实现仿flash效果的实现代码是指使用H5技术来实现类似于Flash的特效...
border_radius属性画出水滴样式
01-30
border_radius属性画出水滴样式
html js 屏蔽原有右键功能菜单，自定义打造专属右键菜单
09-21
html js 屏蔽原有右键功能菜单，自定义右键菜单
js实现右键自定义菜单
10-20
主要为大家详细介绍了JavaScript实现右键菜单功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
渐变的应用
weixin_42789120的博客
11-25 256
学习渐变有背景的重复background-image:linear-gradient(45deg, red 25%,transparent 25% ), l inear-gradient(-45deg,red 25%, transparent 25%), linear-gradient(45deg,transparent 75%,red 75%), linear-gradient(-45...
css加载动画（水滴效果）
qq_25294327的博客
06-16 429
原理是先blur模糊处理，让物体边界重叠，再提高对比度，这样模糊边界就会变清晰。直接用filter自带的属性也可以实现，但调用svg滤镜效果会更好。最终实现效果视频可以看我Dou音，DY号：G_console。
快速了解css层叠规则
不负如来不负卿
06-20 302
前言???? ❌ 设置层叠样式就只会用z-index这个属性 ❌ 一直用 z-index:3;z-index:99;z-index:999;… 这样根据大小来调整元素的上下顺序 ???? z-index只是css层叠的冰山一角，（在定位元素和display:flex的元素中z-index生效）还有比它更重要的东西需要我们知道 ???? 目标：理解 层叠上下文、层叠水平、层叠顺序，就????了 开始学习????（全程大约5分钟） 第一站：层叠上下文（stacking context）⛽ 它是HTML中一个
原生js实现自定义右键菜单
m0_72447899的博客
11-08 395
原生js实现自定义右键菜单
谷歌浏览器插件——Ajax Interceptor，一个用于修改 ajax 请求响应的 chrome 扩展，可以修改ajax请求返回结果，在浏览器上直接mock数据
丶扁扁的糖是扁的 的博客
03-16 7042
如图，开启后会拦截 getData 这个请求，然后将请求数据改为设置的 []。 1、安装方式 https://github.com/YGYooo/ajax-interceptor github的链接如上，我也在csdn资源里上传了，免费下载，但是不知道能不能过审核。 谷歌浏览器 => 拓展程序 加载完后重启浏览器 2、使用方式 点击拓展里的Ajax Interceptor 整个界面很好操作，没有任何多余的按钮 json面板里鼠标悬浮会显示操作按...
JavaScript实现右键菜单
如诗
11-22 671
JavaScript实现博客的右键菜单
H5语音播报和语音文字互转的实现
05-10
实现H5语音播报和语音文字互转，可以通过以下两种方式： 1. 使用Web Speech API Web Speech API是一个JavaScript API，可以让开发者在网页上实现语音识别和语音合成功能。使用Web Speech API实现H5语音播报和语音文字互转，可以按照以下步骤： - 检查浏览器是否支持Web Speech API。 - 使用SpeechRecognition对象实现语音识别功能。 - 使用SpeechSynthesis对象实现语音合成功能。 以下是一个简单的示例代码： ```javascript // 检查浏览器是否支持Web Speech API if ('speechSynthesis' in window && 'SpeechRecognition' in window) { // 创建语音合成对象 var synth = window.speechSynthesis; // 创建语音识别对象 var recognition = new window.SpeechRecognition(); // 监听语音识别结果 recognition.onresult = function(event) { var result = event.results[0][0].transcript; console.log(result); }; // 开始语音识别 recognition.start(); // 播放语音 var utterance = new SpeechSynthesisUtterance('Hello world!'); synth.speak(utterance); } else { console.log('Web Speech API is not supported.'); } ``` 2. 使用第三方服务 除了使用Web Speech API，还可以使用第三方服务实现H5语音播报和语音文字互转。例如，可以使用百度语音技术实现语音识别和语音合成功能。具体步骤如下： - 注册百度语音技术开发者账号，并创建应用。 - 在网页中引入百度语音技术的JavaScript SDK。 - 使用百度语音技术的API实现语音识别和语音合成功能。 以下是一个简单的示例代码： ```javascript // 引入百度语音技术的JavaScript SDK <script src="https://cdn.jsdelivr.net/npm/bd-audio"></script> // 创建百度语音技术的语音识别对象 var speechRecognizer = new BaiduASR(); // 开始语音识别 speechRecognizer.start({ onComplete: function(result) { console.log(result); } }); // 创建百度语音技术的语音合成对象 var speechSynthesizer = new BaiduTTS(); // 播放语音 speechSynthesizer.speak('Hello world!'); ``` 需要注意的是，使用第三方服务需要遵守相关服务条款和隐私政策，并保障用户个人隐私安全。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值