css 部分文字、边框样式等

1.文字发光

        text-shadow(h-shadow,v-shadow,blur,color)
        

        用法:  text-shadow: 0 0 6px red, 0 0 20px red, 0 0 30px red, 0 0 40px red;
        添加多个阴影，效果如上，如果希望发光效果小一点多个阴影数值间隔小一点

         text-shadow: 0 0 3px #fff, 0 0 5px #fff；效果
       
 

2.文字颜色渐变

        思路：设置背景色渐变，文字颜色设置透明
        代码：

.demo {
    background: -webkit-linear-gradient(to top, rgba(255, 189, 60, 1), rgba(255, 255, 255, 1));
    background: linear-gradient(to top, rgba(255, 189, 60, 1), rgba(255, 255, 255, 1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

效果：

3.文字描边

        效果:

.demo {
    color: #ff0000;
    text-shadow: 1px 0 rgb(83, 168, 205), -1px 0 rgb(83, 168, 205), 0 1px rgb(83, 168, 205), 0 -1px rgb(83, 168, 205), 1px 1px rgb(83, 168, 205), -1px -1px rgb(83, 168, 205), 1px -1px rgb(83, 168, 205), -1px 1px rgb(83, 168, 205);
}

4.文字间距: 

.demo {
    letter-spacing: 3px; // 字符间隙
    word-spacing：5px; // 控制单词之间的间距
}

5.边框颜色渐变
        

.demo {
    width: 100%;
    height: 230px;
    position: relative;
    z-index: 0; // 内容需要在边框背景上方
    border-radius: 10px;
    background: -webkit-linear-gradient(to top, rgba(2, 37, 79, 1), rgba(3, 21, 43, 1));
    background: linear-gradient(to top, rgba(2, 37, 79, 1), rgba(3, 21, 43, 1));
}

.demo::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: linear-gradient(to top, rgb(4, 95, 151), rgb(3, 39, 83)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    border-image: linear-gradient(to top, rgb(4, 95, 151), rgb(3, 39, 83)) 1;
    z-index: -1; // 边框背景必须低于内容
}

上述方法可以设置渐变边框为圆角
效果: