:hover 当鼠标放到上面时会产生变化 border-radius: 设置圆角 可以分别设置4个角 background-image: linear-gradient(to right,#ff9000,#ff5000);设置线性渐变，括号里的参数第一个参数为方向第二个参数为起始的颜色第三个参数为结 ...
分类：
Web程序 时间：
2020-06-26 16:32:20
阅读次数：
75
一、横向条纹如下代码： 1 background: linear-gradient(#fb3 20%, #58a 80%) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而 ...
分类：
Web程序 时间：
2020-06-13 14:33:24
阅读次数：
76
因为我不喜欢背公式，希望自己能找到比较容易理解和推理的记忆方式吧，很早就感觉CSS3渐变的属性组成不太好记忆，所以今天终于挖了这个坑，其实也没什么很特别的，嘻嘻，如果有错误欢迎提出。 基本用法 我们一般都是在添加background的时候会用到这个渐变效果，渐变效果分为linear-gradient ...
分类：
Web程序 时间：
2020-06-03 21:59:24
阅读次数：
77
线性渐变 linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet)linear-gradient(指定渐变方向, 颜色的起点，颜色的结束) 文本溢出于省略标记 text-overflow:ellipsis; （溢出文本 ...
分类：
Web程序 时间：
2020-06-03 20:13:04
阅读次数：
113
达到的效果： 今天碰到这样一个需求，为带有圆角的框加一个角标。而且角标是圆角的。我真的不想切图，怎么办。突然想到css3可以实现条纹背景，那这不就可以了么 background: linear-gradient(45deg, transparent 50%, #61C4CF 0%); backgro ...
分类：
Web程序 时间：
2020-06-03 15:37:06
阅读次数：
233
css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要网络请求，既耗带宽又耗时间，下面我将介绍用css3的渐变来改善这一问题。 linear-gradient 基本用法 想要知道线性 ...
分类：
Web程序 时间：
2020-05-30 20:18:00
阅读次数：
69
项目中用到做进度条，参考 <view style="background: linear-gradient(45deg,#F9C058 25%,#FA7560 0,#FA7560 50%,#F9C058 0,#F9C058 75%,#FA7560 0);width: 100%;height: 200 ...
分类：
其他好文 时间：
2020-05-30 10:55:40
阅读次数：
81
先来说说渐变吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果图如下所示：也就是说真正的渐变只出现在容器 60%（从20%到80%） 的高度区域 如果把两个色标合在一起，会怎样呢w3c是这样规定的“如果多个色标具有相同的位置， 它们会产生一个无 ...
分类：
Web程序 时间：
2020-05-10 19:27:00
阅读次数：
84
网格 html { background: #58a; background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0), linear-grad ...
分类：
Web程序 时间：
2020-05-10 19:10:43
阅读次数：
84
实现思路 渐变效果采用linear-gradient实现，但是它只能设在background-image属性上 background-clip的含义是背景图片切割，当值设为text时，背景图片将根据文字轮廓进行切割 切割完成后，切割好的新背景图片被挡在文字下方，将文字的颜色设为透明即可让根据文字轮廓 ...
分类：
其他好文 时间：
2020-05-03 18:22:02
阅读次数：
71
