字体图标、文字、背景色的css渐变

预览效果：

<style>.type i{   background: -webkit-linear-gradient(-90deg, #caff55 20%, #45cd00 60%); /*背景渐变色*/-webkit-background-clip: text;  /* 规定背景的绘制区域为文字区域*/-webkit-text-fill-color: transparent; /* 文字填充颜色（这里一定要设置 transparent，不然会覆盖底部的背景色）*/font-style: normal;font-size:30px;font-weight:bold;}.box{width:300px;height:100px;color:#fff;background: -webkit-linear-gradient(-90deg, #ff6600 0%, #ff0000 100%);background: -moz-linear-gradient(-90deg, #ff6600 0%, #ff0000 100%); background: -o-linear-gradient(-90deg, #ff6600 0%, #ff0000 100%); background: -ms-linear-gradient(-90deg, #ff6600 0%, #ff0000 100%);  background: linear-gradient(-90deg, #ff6600 0%, #ff0000 100%);
}</style><div class="type"><i class="iconfont icon-remen fs26">☀</i><i class="iconfont icon-remen fs26">❤</i><i class="iconfont icon-remen fs26">渐变字体</i>
</div><div class="box"> 背景色渐变</div>

字体图标、文字、背景色的css渐变相关推荐

移动WEB学习 - 字体图标、平面转换、渐变
一.字体图标目标:使用字体图标技巧实现网页中简介的图标效果字体图标的优点: 灵活性:灵活的修改样式,例如:尺寸.颜色等轻量级:体积小,渲染快.降低服务器请求次数兼容性:几乎兼容所有主流浏览器 ...
基于 bootstrap 字体图标，用纯CSS实现星级评分功能
需要用到的图标实现原理关键属性是 text-overflow: clip;,表示直接截断文本.我们经常用这个属性的另一个值 text-overflow: ellipsis; 来做省略表示. 先平铺 ...
将阿里巴巴Iconfont字体图标引入到HTML(CSS)文件中
一.打开iconfont阿里巴巴矢量图标库官方网站.找到喜欢的图标添加入库,同时建立项目,将你所选择的图标放到项目里. 二.复制 "//at..."那一串地址,将其写入在你想引用某 ...
iconfont 字体图标
目前国内使用最多的是iconfont-阿里巴巴字体矢量图标库, 字体图标主要显示网页中通用常用的一些小图标iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标 ...
字体图标iocnfont
1.使用字体图标 1.1引入css <link rel="stylesheet" href="./fonts/iconfont.css"> 类名引入 ...
初学前端收集的字体图标以及字体网站
抱歉,阿里和icomoon长久不使用,忘得差不多了. 一.字体图标 1.font-awesome 引入CSS: https://cdnjs.cloudflare.com/ajax/libs/font- ...
字体图标 icon-font
轻量级: 一个字体图标要比一系列的图像要小,一旦字体加载了, 图标就会马上渲染出来, 减少了服务器请求灵活性: 本是其实是文字, 可以很随意的改变颜色, 产生阴影透明效果旋转等兼容性: 几乎支 ...
字体图标库-如何使用-icomoon
目录如何将字体图标运用到网页制作中如何向字体图标文件中追加新的图标为了使html效果更加美观,我们通常会引入字体图标来辅助我们,下面我姐介绍字体图标的使用方法如何将字体图标运用到网页制作中方 ...
uni-app引入阿里字体图标库
1.官方地址 2.阿里巴巴字体图标库使用方法 (1).注册账号 (2).创建项目 (3).找到喜欢的图标 (4).将自己喜欢的图标加入到项目中去 (5).生成代码并下载到本地 (6).将iconfon ...

字体图标、文字、背景色的css渐变

字体图标、文字、背景色的css渐变相关推荐

最新文章

热门文章