css背景渐变、css文字渐变

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

背景渐变

background: linear-gradient(-45deg, #3967FF, #B500FE);

文字渐变

background: linear-gradient(-45deg, #3967FF, #B500FE);
/* background-image:linear-gradient(90deg,#0072FF,#00EAFF,#01AAFF); */
-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方式也不是很好，对字体要求比较大

css背景渐变、css文字渐变相关推荐

css 背景图片和背景色渐变同时存在
css 背景图片和背景色渐变同时存在 1.垂直渐变效果图: .wrapper {width:500px;height: 500px;background: url(./imabg.png) no-r ...
css伪类渐变,CSS3文字渐变内发光投影效果_css
前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考.发个效果图大家看先: 投影shadow box-shadow 一般我们都是用css3的box-sh ...
CSS背景属性之颜色渐变
颜色渐变颜色渐变其实在网页设计中并不是特别常见,但也不可避免的会出现导航栏是渐变色这种情况或者别的不是单一颜色的情况,例如: 这样的设计解决方案并不是只可以使用颜色渐变,我们可以使用两个div拼接, ...
css背景图替代文字 - 如何让css无法加载时页面功能依然不受影响
方法一:利用text-indent将文字移出盒子,然后让换行文字不换行,这样,当css无法加载时,虽然背景图无法显示,但是文字也不会被移出盒子,这样文字显示在用户的视野里了代码: <!DOCT ...
CSS背景图片，文字设置背景
关于CSS里的背景图片 CSS背景叠加背景图片: 背景图片尺寸: 文字设置背景: CSS背景叠加背景图片: background-image 可以为一个元素添加多个背景,第一幅图片最靠近观看者 # ...
css背景透明(css背景透明度怎么设置)
CSS 背景颜色透明怎么弄外层div: background-color: rgba(255, 255, 255, 0.9); /* 白色并且阿尔法通道是0.9*/ 内层div: backgroun ...
css背景随机,CSS秘密花园：随机背景
<CSS Secrets>是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密.是一本CSSer值得一读的一本书,经过一段时间的阅读,我.@南北和@彦子一起将在W3cplu ...
前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...
【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】
emmet语法快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置搜索框输入"格式化",勾选上如图三个选项 ...
【css】渐变-背景渐变、边框渐变、文字渐变
渐变 ● 线性渐变(向下/向上/向左/向右/对角线) ● 径向渐变(由其中心定义) 线性渐变 background-image: linear-gradient(direction, color-st ...

css背景渐变、css文字渐变

背景渐变

文字渐变

css背景渐变、css文字渐变相关推荐

最新文章

热门文章