css技巧备忘录

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS创建霓虹效果，关键在于利用text-shadow属性设置多层阴影来实现。同时，讲解了如何通过JavaScript的element.style和element.setAttribute方法来设置元素的内联样式，强调了element.style属性的只读特性以及正确设置内联样式的注意事项。

文章目录

- 氖光效果（Neon）
- HTML元素的内联样式的js设置方法

氖光效果（Neon）

Neon可以产生很炫酷的效果，它的效果和text-shadow有关系。
text-shadow: h-shadow v-shadow blur color;
在这里插入图片描述
关键在于第三个参数blur，我们设置3层以上阴影效果，并且每层blur值间隔较大，就能起到炫酷效果。

<template>
  <div>
    <h1>Neon</h1>
  </div>
</template>

<script>
export default {};
</script>

<style  scoped>
div {
  background: black;
}
h1 {
  color: #fff;
  text-shadow: 0 0 10px #0ebeff, 0 0 20px #0ebeff, 0 0 50px #0ebeff, 0 0 100px #0ebeff, 0 0 200px #0ebeff;
}
</style>

效果展示：
在这里插入图片描述

HTML元素的内联样式的js设置方法

element.style和element.setAttribute可以用来设置内联样式（不会改变css样式），如：

ele.style.color = 'blue';
ele.setAttribute('style', 'color: red;')

但是不可以这样写：ele.style = “color: red;” 因为，元素上的style属性是只读的，不能直接赋值，只能通过style.属性来设置值。

注意：element.style只可以获取元素的内联style样式，不包含css样式（如head里的样式，和.css样式文件），要获取一个元素的所有样式，可以使用window.getComputedStyle