微信小程序界面设计CSS3在小程序中样式精通课程-第9课-渐变Gradients-径向渐变-设置形状_小程序中CSS3_前端样式教程

小程序中CSS3: 微信小程序界面设计CSS3在小程序中样式精通课程-第9课-渐变Gradients-径向渐变-设置形状
时间：2019/1/11 16:22:32  作者：互联网  来源：网络转载  查看：27961  评论：0
内容摘要：向渐变 -设置形状通用语法shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。实例：形状为圆形的径向渐变&l...
向渐变 -设置形状

通用语法

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

实例：形状为圆形的径向渐变

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

#grad1 {

    height: 150px;

    width: 200px;

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

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

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

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

}

#grad2 {

    height: 150px;

    width: 200px;

    background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */

    background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */

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

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

}

</style>

</head>

<body>

<h3>径向渐变 - 形状</h3>

<p><strong>椭圆形 Ellipse（默认）：</strong></p>

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

<p><strong>圆形 Circle：</strong></p>

<div id="grad2"></div>

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

</body>

</html>

效果图

小程序应用

Wxml代码

<view class='c1'>

椭圆形 Ellipse（默认）

</view>

<view class='c2'>

圆形 Circle

</view>

Wxss代码

.c1{

margin: 10px;

padding: 20px;

height: 150px;

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

}

.c2{

margin: 10px;

padding: 20px;

height: 150px;

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

}

效果图

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


标签：渐变Gradients-径向渐变-设置形状微信小程序界面设计入门课程 wxss中css3入门在线视频课程
上一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第10课-渐变Gradients-不同尺寸大小关键字的使用
下一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第8课-渐变Gradients-径向渐变-颜色结点

相关文章

相关评论

微信小程序界面设计CSS3在小程序中样式精通课程-第9课-渐变Gradients-径向渐变-设置形状

向渐变 -设置形状

通用语法

效果图

小程序应用

Wxml代码

Wxss代码