article 简单渐变实现

注意：此功能在0.10.0版本才会实现。

概述

W3C 中对渐变的描述：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients

WEEX 中只是实现了描述中的简单线性渐变。

支持控件

目前支持weex中所有控件

样式

background-image

示例

background-image:linear-gradient(to top,#a80077,#66ff00);

支持的效果

只支持两种颜色的渐变，渐变方向如下：

to right 从左向右渐变
to left 从右向左渐变
to bottom 从上到下渐变
to top 从下到上渐变
to bottom right 从左上角到右下角
to top left 从右下角到左上角

注意

background-image和background-color同时设置时，background-image优先级高于background-color。

完整示例：

<template>
    <scroller style="background-color: #3a3a3a">
        <div class="container1" style="background-image:linear-gradient(to right,#a80077,#66ff00);">
            <text class="direction">to right</text>
        </div>
        <div class="container1" style="background-image:linear-gradient(to left,#a80077,#66ff00);">
            <text class="direction">to left</text>
        </div>
        <div class="container1" style="background-image:linear-gradient(to bottom,#a80077,#66ff00);">
            <text class="direction">to bottom</text>
        </div>
        <div class="container1" style="background-image:linear-gradient(to top,#a80077,#66ff00);">
            <text class="direction">to top</text>
        </div>
        <div style="flex-direction: row;align-items: center;justify-content: center">
            <div class="container2" style="background-image:linear-gradient(to bottom right,#a80077,#66ff00);">
                <text class="direction">to bottom right</text>
            </div>
            <div class="container2" style="background-image:linear-gradient(to top left,#a80077,#66ff00);">
                <text class="direction">to top left</text>
            </div>
        </div>
    </scroller>
</template>
<style>
    .container1 {
        margin: 10px;
        width: 730px;
        height: 200px;
        align-items: center;
        justify-content: center;
        border: solid;
        border-radius: 10px;
    }

    .container2 {
        margin: 10px;
        width: 300px;
        height: 300px;
        align-items: center;
        justify-content: center;
        border: solid;
        border-radius: 10px;
    }

    .direction {
        font-size: 40px;
        color: white;
    }
</style>