lineargradient，如何利用CSS3的线性渐变linear-gradient制作边框
朋友们，lineargradient和如何利用CSS3的线性渐变linear-gradient制作边框是当今热门话题，但是它们的内涵和影响力可能会让人感到困惑。在本篇文章中，我将为你们揭示它们的本质和重要性，希望能够为你们带来新的认识。
ios 怎么做到安卓的lineargradient效果
android使用LinearGradient进行字体渐变的效果，如下图显示：
就像上面的显示效果一样一束白光闪过，这种效果主要还是使用了LinearGradient类来进行的
LinearGradient也称作线性渲染，LinearGradient的作用是实现某一区域内颜色的线性渐变效果
它有两个构造函数
代码如下复制代码
public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)
其中，参数x0表示渐变的起始点x坐标；参数y0表示渐变的起始点y坐标；参数x1表示渐变的终点x坐标；参数y1表示渐变的终点y坐标；color0表示渐变开始颜色；color1表示渐变结束颜色；参数tile表示平铺方式。
Shader.TileMode有3种参数可供选择，分别为CLAMP、REPEAT和MIRROR：
CLAMP的作用是如果渲染器超出原始边界范围，则会复制边缘颜色对超出范围的区域进行着色
REPEAT的作用是在横向和纵向上以平铺的形式重复渲染位图
MIRROR的作用是在横向和纵向上以镜像的方式重复渲染位图
public LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile);
其中，参数x0表示渐变的起始点x坐标；参数y0表示渐变的起始点y坐标；参数x1表示渐变的终点x坐标；参数y1表示渐变的终点y坐标；参数colors表示渐变的颜色数组；参数positions用来指定颜色数组的相对位置；参数tile表示平铺方式。通常，参数positions设为null，表示颜色数组以斜坡线的形式均匀分布。
下面这段代码是直接从git上面的项目拷贝下来的
代码如下复制代码
package com.example.shimmer;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.widget.TextView;
public class MyTextView extends TextView{
private LinearGradient mLinearGradient;
private Matrix mGradientMatrix;
private Paint mPaint;
private int mViewWidth= 0;
private int mTranslate= 0;
private boolean mAnimating= true;
public MyTextView(Context context, AttributeSet attrs){
super(context, attrs);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh){
super.onSizeChanged(w, h, oldw, oldh);
if(mViewWidth== 0){
mViewWidth= getMeasuredWidth();
if(mViewWidth> 0){
mPaint= getPaint();
mLinearGradient= new LinearGradient(-mViewWidth, 0, 0, 0,
new int[]{ 0x33ffffff, 0xffffffff, 0x33ffffff},
new float[]{ 0, 0.5f, 1}, Shader.TileMode.CLAMP);
mPaint.setShader(mLinearGradient);
mGradientMatrix= new Matrix();
}
}
}
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
if(mAnimating&& mGradientMatrix!= null){
mTranslate+= mViewWidth/ 10;
if(mTranslate> 2* mViewWidth){
mTranslate=-mViewWidth;
}
mGradientMatrix.setTranslate(mTranslate, 0);
mLinearGradient.setLocalMatrix(mGradientMatrix);
postInvalidateDelayed(50);
}
}
}
这段代码主要是分两步：一个是在onSizeChanged()即大小发生改变的时候，另外一个是onDraw()主要是用来做动画的效果的，
如何利用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
<ul class="line">
<li>linear-gradient</li>
<li>linear-gradient</li>
<li>linear-gradient</li>
</ul>OK，又出来了，但还是有点瑕疵，那么问题来了，就是改变描边位置（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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title></title>
<style>
.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);
}
</style>
</head>
<body>
<p class="box first"></p>
<p class="box second"></p>
<p class="box third"></p>
</body>
</html>有代码可以看出，其实我们并没有使用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。
react-native-linear-gradient的使用
react-native-linear-gradient
LinearGradient的属性：
colors
An array of at least two color values that represent gradient colors. Example: ['red','blue'] sets gradient from red to blue.
至少2个颜色值，用于颜色渐变。
start
An optional object of the following type:{ x: number, y: number}. Coordinates declare the position that the gradient starts at, as a fraction of the overall size of the gradient, starting from the top left corner. Example:{ x: 0.1, y: 0.1} means that the gradient will start 10% from the top and 10% from the left.
可选的对象，形式如:{ x: number, y: number}。坐标宣告了渐变的开始位置。
end
Same as start, but for the end of the gradient.
和start一样，但是渐变的结束位置。
start和end同时存在，渐变的起点和终点的连线，即使渐变的轨迹方向。
start={{ x: 0.0, y: 0.25}} end={{ x: 0.5, y: 1.0}}
locations
An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in colors prop. Example: [0.1, 0.75, 1] means that first color will take 0%- 10%, second color will take 10%- 75% and finally third color will occupy 75%- 100%.
可选数组，内容是一些列数字，定义了colors中对应的每个渐变颜色的停止位置。
或者换一种理解方式：0.1-0.7是颜色1和颜色2之间渐变的区域，0.7到1是颜色2和颜色3之间渐变的区域。那么还有个0-0.1区域呢？该区域是颜色1。
locations={[ 0, 0.5, 0.8]}，则0-0.5是颜色1和颜色2渐变区域，0.5-0.8是颜色2和颜色3的渐变区域，而0.8-1区域的颜色是颜色3。
个人认为，第二种理解更为准确，并且更加容易理解和记忆。
其中locations对应的百分比，应该是上面提到的渐变轨迹的百分比。
lineargradient和如何利用CSS3的线性渐变linear-gradient制作边框的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！