css技巧备忘录

氖光效果（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