微信小程序界面设计CSS3在小程序中样式精通课程-第7课-渐变Gradients-重复的线性渐变_小程序中CSS3_前端样式教程

联系我们我要留言

小程序中CSS3: 微信小程序界面设计CSS3在小程序中样式精通课程-第7课-渐变Gradients-重复的线性渐变
时间：2019/1/11 16:16:32  作者：互联网  来源：网络转载  查看：27930  评论：0
内容摘要：重复的线性渐变通用语法repeating-linear-gradient() 函数用于重复线性渐变一个重复的线性渐变：<!DOCTYPE html><html><head><meta charset="utf-8"&g...
重复的线性渐变

通用语法

repeating-linear-gradient() 函数用于重复线性渐变

一个重复的线性渐变：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

#grad1 {

    height: 200px;

    background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */

    background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */

    background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */

    background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */

}

</style>

</head>

<body>

<h3>重复的线性渐变</h3>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>

</html>

效果图

小程序应用

Wxml代码

<view class='c1'>

重复的线性渐变

</view>

Wxss代码

.c1{

margin: 10px;

padding: 20px;

background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */

}

效果图

标签：渐变Gradients-重复的线性渐变微信小程序界面设计入门课程 wxss中css3入门在线视频课程
上一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第8课-渐变Gradients-径向渐变-颜色结点
下一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第6课-渐变Gradients-使用透明度

相关文章

相关评论

本类更新

本类推荐

本类排行

: 小白教程 | 计算机毕业设计作品网 | 小程序中文网 | 洪荒毕设网 | 毕业设计资料下载 |

联系我们 - 服务报价 - 关于我们 - 留言本

咨询QQ/微信：45157718

微信小程序界面设计CSS3在小程序中样式精通课程-第7课-渐变Gradients-重复的线性渐变

重复的线性渐变

通用语法

小程序应用

Wxml代码

Wxss代码