900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 荧光效果 中间粗两边细的线 锥形渐变(半圆) css背景渐变 css文字渐变

荧光效果 中间粗两边细的线 锥形渐变(半圆) css背景渐变 css文字渐变

时间:2018-12-27 04:56:30

相关推荐

荧光效果 中间粗两边细的线 锥形渐变(半圆) css背景渐变 css文字渐变

现在项目中,越来越常见的就是背景渐变、文字渐变了,所以这里菜鸟记录一下自己的代码,今后好直接使用

荧光效果

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。