线性渐变

注意是设置背景图片

wxml:

<!--index.wxml-->
<view class="container"><view class="linear-gradient">线性渐变</view>
</view>

wxss:

.linear-gradient{width:400rpx;height:300rpx;background-image: linear-gradient(red,orange,yellow,green,cyan,blue,purple);
}

效果图：

径向渐变

radial-gradient:shape size @position,color1,color2 ,…

shape 形状 circle|ellipse
size 大小 farthest-corner|farthest-side|closest-corner|closest-side
@position @ 10px 10px | @10% 10%
color #FFFFFF|rgba(255,255,255,0.5)

wxml:

<!--index.wxml-->
<view class="container"><view class="radial-gradient">径向渐变</view>
</view>

wxss:

.radial-gradient{width:200rpx;height:200rpx;background-image: radial-gradient(ellipse farthest-side at 50% 50%, red, yellow, black);
}

微信小程序css之线性渐变相关推荐

微信小程序 php毛玻璃,微信小程序 CSS filter（滤镜）的使用示例详解
之前在看七月老师的视频的时候,看到了有一个样式是 -webkit-filter ,不知道是什么(我没咋学过CSS,嘿嘿,所以不知道是啥),于是查了一下,原来是滤镜吖.但是在微信小程序里使用的时候,下面 ...
微信小程序css 华文琥珀_琥珀项目：较小的，面向生产力的Java语言功能
微信小程序css 华文琥珀 Brian Goetz最近的消息欢迎来到琥珀! 介绍Project Amber ( OpenJDK的一部分, 最初于1月提出 ). Goetz通过介绍"欢迎使用A ...
微信小程序 css边框阴影,微信小程序|CSS的内边距和圆框
本文首发于微信公众号: "算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高. 光有浮 ...
微信小程序打开红包的css_微信小程序 css使用技巧总结
微信小程序 css使用技巧 1:用纯CSS创建一个三角形的原理把上.左.右三条边隐藏掉(颜色设为 transparent) .demo { width: 0; height: 0; border-wi ...
微信小程序CSS样式图片闪烁
微信小程序CSS样式图片闪烁微信小程序直接用CSS样式让图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twi ...
微信小程序css卡片样式（带阴影效果）
微信小程序css卡片样式(带阴影) 效果图 wxml代码 <view class="card"></view> css样式 .card{width: 90% ...
微信小程序 CSS filter（滤镜）的使用示例
前言之前在看七月老师的视频的时候,看到了有一个样式是-webkit-filter,不知道是什么(我没咋学过CSS,嘿嘿,所以不知道是啥),于是查了一下,原来是滤镜吖.但是在微信小程序里使用的时候,下 ...
微信小程序css设置本地背景图片
微信小程序中,直接在css中直接使用本地图片为view设置背景图片: <style>div{width: 500px;height: 500px;}.box1{background-ima ...
微信小程序css单位,微信小程序 rpx 尺寸单位详细介绍
微信小程序最近火了,大家开发微信小程序有没有注意微信小程序对手机屏幕的要求或者影响呢,面对不同的手机屏幕,微信 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应, 微信小程序 ...

微信小程序css之线性渐变

线性渐变

径向渐变

微信小程序css之线性渐变相关推荐

最新文章

热门文章