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

小程序中CSS3: 微信小程序界面设计CSS3在小程序中样式精通课程-第11课-渐变Gradients-重复的径向渐变
时间：2019/1/11 16:27:18  作者：互联网  来源：网络转载  查看：27929  评论：0
内容摘要：重复的径向渐变通用语法repeating-radial-gradient() 函数用于重复径向渐变：实例：一个重复的径向渐变
重复的径向渐变

通用语法

repeating-radial-gradient() 函数用于重复径向渐变：

实例：一个重复的径向渐变

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

#grad1 {

    height: 150px;

    width: 200px;

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

    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */

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

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

}

</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;

height: 150px;

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

}

效果图

欢迎大家收看我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程


标签：渐变Gradients-重复的径向渐变微信小程序界面设计入门课程 wxss中css3入门在线视频课程
上一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第12课-2D转化-translate()从当前元素位置移动
下一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第10课-渐变Gradients-不同尺寸大小关键字的使用

相关文章

相关评论

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

重复的径向渐变

通用语法

小程序应用

Wxml代码

Wxss代码