JavaScript实现边框大小和颜色改变以及高斯模糊

最新推荐文章于 2024-04-25 10:51:54 发布

短发少女ԅ(¯ㅂ¯ԅ)

最新推荐文章于 2024-04-25 10:51:54 发布

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/weixin_44364634/article/details/122683223

版权

本文介绍了如何使用JavaScript和CSS在HTML中实现边框颜色选取、大小调整和高斯模糊功能。文章详细讲解了HTML的range类型input元素用于数值指定，CSS变量提高样式复用效率，以及通过JavaScript获取input值并动态更新边框样式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

1、HTML部分

1.1 实现各种标题书写

这里要注意JS这个要用span围住，后面要根据颜色的变化而变化

<body>
	<h2>Update CSS Varibles with <span class="h1">JS</span></h2>
</body>

1.2 实现各种input，比如颜色选取、边框大小改变、边框模糊程度

<div class = "controls">
	<lable for = "spacing">Spacing:</lable>
	<input id="spcaing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
	
	<lable for = "blur">Blur:</lable>
	<input id="blur" type="range" name="spacing" min="0" max="25" value="10" data-sizing="px">
	
	<lable for = "base">Color:</lable>
	<input id="base" type="color" name="base" value="#ffc600">
</div>

知识点

1. 关于type=“range”, range 类型的元素允许用户指定一个数值，