现在项目中,越来越常见的就是背景渐变、文字渐变了,所以这里菜鸟记录一下自己的代码,今后好直接使用
荧光效果
text-shadow:0 0 5px #0065fd,1px 1px 1px #0065fd,-1px -1px 1px #0065fd,0 0 10px #0065fd,0 0 20px #0065fd;
中间粗两边细的线
width: 90%;height: 1px;background: linear-gradient(left, #fff -4%,#9C9C9C 50%,#fff 100%);
锥形渐变
background-image:conic-gradient(from 45deg at 25% 25%, white, deepskyblue);
参考:
MDN:/zh-CN/docs/Web/CSS/gradient/conic-gradient
以前实现半圆比较麻烦,需要使用border,现在不需要了!
以前半圆实现代码:
border-radius:245px 0 0;width: 245px;height: 245px;background: #f00;
现在:
width: 245px;height: 245px;border-radius: 50%;background-image:conic-gradient(red, red 120deg, transparent 120deg);
注意:
可能会有锯齿效果!
背景渐变
background-image: linear-gradient(-45deg, #3967FF, #B500FE);
文字渐变
background-image: linear-gradient(-45deg, #3967FF, #B500FE);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip:text;color:transparent;
注意:
1、文字渐变不能和文字描边的text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0
方式共存
2、使用text-stroke方式也不是很好,对字体要求比较大
text-stroke
在线测试:/tools/index?name=css3_textstroke
如果觉得《荧光效果 中间粗两边细的线 锥形渐变(半圆) css背景渐变 css文字渐变》对你有帮助,请点赞、收藏,并留下你的观点哦!