如何利用CSS3的线性渐变linear-gradient制作边框
这篇文章主要介绍了关于如何利用CSS3的线性渐变linear-gradient制作边框，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下linear-gradient线条用来制作边框还是比较给力的,尤其是利用其描边可以制作一些复制的边框效果,这里我们就来看一下利用CSS3的线性渐变linear-gradient制作边框的示例一般的app边框描边的线都小于一像素，那么我就像往常一样直接描了1px的边框，虽然是1px可是结果和app里的描边完全不一样“粗了”，所以就在网找了一下看看有没有解决方法，可是找了一会没找到，那咋办，需求方不愿意不要这么粗，那就只能自己解决了。所以用上个方法联想到了线性渐变（linear-gradient）CSS .line li{ border: none; background-image: -webkit-linear-gradient(#222 50%,transparent 50%); background-image: -moz-linear-gradient(#222 50%,transparent 50%); background-image: -o-linear-gradient(#222 50%,transparent 50%); background-image: linear-gradient(#222 50%,transparent 50%); background-size: 100% 1px; background-repeat: no-repeat; background-position: bottombottom;}XML/HTML linear-gradient linear-gradient linear-gradientOK，又出来了，但还是有点瑕疵，那么问题来了，就是改变描边位置（left，top，right，bottom）需要修改参数如 left描边需要改变：CSS background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%); background-size: 1px 100%; background-position: left;具体的都不一一列出了。利用linear制作复杂的边框效果另外，在网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码，大家可以在自己的电脑中查看效果：CSS .box { margin: 80px 30px; width: 200px; height: 200px; position: relative; background: #fff; float: left; } .box:before { content: ''; z-index: -1; position: absolute; width: 220px; height: 220px; top: -10px; left: -10px; } .first:before { background-image: linear-gradient(90deg, yellow, gold); } .second:before { background-image: linear-gradient(0deg, orange, red); } .third:before { background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px); } 有代码可以看出，其实我们并没有使用border，那么这种边框效果是怎么实现的呢？总体思路是，我们先定义一个白色的p，在定义一个白色方块大一圈的带颜色的p。两个重叠一下，并且让白色的p覆盖彩色p，就实现了边框的效果。这里面用到的css知识点很多。1、:before伪类通过上面的代码我们看出，其实我们在定义的白色p中定义了一个:before伪类，把彩色方块所有的样式都放在了这里。这是因为使用:before定义可以使得定位更加方便，只要调整top和left为边框的宽度就可以了。同时也是的二者成为一个整体。2、linear-gradient现在很多浏览器都支持这个css方法。该方法有以下三种使用模式：①background:linear-gradient(top,#fff,#000)这段代码的意思是，从上部开始为白色，到底部为黑色进行过度。②background:linear-gradient(top,right,#fff,#000)这段代码关于位置传递了两个参数，top和right，表示从右上放开始，到左下方变化，其他道理与第一个相同。③background:linear-gradient(30deg,#fff,#000)这段代码的第一个参数传递的是角度，其实道理和位置是一样的，只是不是从标准的位置开始变化了。那么角度和位置的对应关系是什么呢？根据实验，0度对应bottom，90度对应left，180度对应top，360度对应right。
android怎么用paint实现图像的渐变出现
在android.graphics中提供了有关Gradient字样的类，例如LinearGradient线性渐变、RadialGradient径向渐变和SweepGradient角度渐变三种，他们的基类为android.graphics.Shader。为了演示图像渐变效果，下面给出一个简单的实例。一、LinearGradient线性渐变在android平台中提供了两种重载方式来实例化该类分别为，他们的不同之处为参数中第一种方法可以用颜色数组，和位置来实现更细腻的过渡效果，比如颜色采样int[]colors数组中存放20种颜色，则渐变将会逐一处理。而第二种方法参数仅为起初颜色color0和最终颜色color1。LinearGradient(floatx0,floaty0,floatx1,floaty1,int[]colors,float[]positions,Shader.TileModetile)LinearGradient(floatx0,floaty0,floatx1,floaty1,intcolor0,intcolor1,Shader.TileModetile)使用实例如下：Paintp=newPaint();LinearGradientlg=newLinearGradient(0,0,100,100,Color.RED,Color.BLUE,Shader.TileMode.MIRROR);//参数一为渐变起初点坐标x位置，参数二为y轴位置，参数三和四分辨对应渐变终点，最后参数为平铺方式，这里设置为镜像刚才已经讲到Gradient是基于Shader类，所以我们通过Paint的setShader方法来设置这个渐变，代码如下：p.setShader(lg);canvas.drawCicle(0,0,200,p);//参数3为画圆的半径，类型为float型。二、RadialGradient镜像渐变有了上面的基础，我们一起来了解下径向渐变。和上面参数唯一不同的是，径向渐变第三个参数是半径，其他的和线性渐变相同。RadialGradient(floatx,floaty,floatradius,int[]colors,float[]positions,Shader.TileModetile)RadialGradient(floatx,floaty,floatradius,intcolor0,intcolor1,Shader.TileModetile)三、SweepGradient角度渐变对于一些3D立体效果的渐变可以尝试用角度渐变来完成一个圆锥形，相对来说比上面更简单，前两个参数为中心点，然后通过载入的颜色来平均的渐变渲染。SweepGradient(floatcx,floatcy,int[]colors,float[]positions)//对于最后一个参数SDK上的描述为MaybeNULL.Therelativepositionofeachcorrespondingcolorinthecolorsarray,beginningwith0andendingwith1.0.Ifthevaluesarenotmonotonic,thedrawingmayproduceunexpectedresults.IfpositionsisNULL,thenthecolorsareautomaticallyspacedevenly.，所以建议使用下面的重载方法，本方法一般为NULL即可。SweepGradient(floatcx,floatcy,intcolor0,intcolor1)到此，希望大家对图像特效处理有了一定的认识，了解这些对打好Android游戏开发的基础很有好处。转载
