为圆角矩形卡片底部添加阴影效果
2017-07-28 08:07
260 查看
三步走
1.先上效果 2.再上代码 3.最后原理
1.效果
2.代码
不需要渐变颜色的阴影,直接使用solid填充颜色既可
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 底部阴影层,向右向下各便宜2dp --> <item> <shape android:shape="rectangle" > <solid android:color="#90000000" /> <corners android:radius="@dimen/home_page_round_rectangle_card_bg_radius" /> </shape> </item> <!-- 阴影上边的层,向上便宜2dp漏出下层的部分阴影层 --> <item android:bottom="2dp"> <shape android:shape="rectangle" > <solid android:color="@color/home_page_card_title_business_mode" /> <corners android:radius="@dimen/home_page_round_rectangle_card_bg_radius" /> </shape> </item> </layer-list>
需要渐变颜色的阴影,使用gradient代替solid填充颜色
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 底部阴影层,向右向下各便宜2dp --> <item> <shape android:shape="rectangle" > <gradient android:angle="90" android:type="linear" android:startColor="#22a9a09d" android:centerColor="#bbbbbb" android:endColor="#90000000"/> <corners android:radius="@dimen/home_page_round_rectangle_card_bg_radius" /> </shape> </item> <!-- 阴影上边的层,向上便宜2dp漏出下层的部分阴影层 --> <item android:bottom="2dp"> <shape android:shape="rectangle" > <solid android:color="@color/home_page_card_title_business_mode" /> <corners android:radius="@dimen/home_page_round_rectangle_card_bg_radius" /> </shape> </item> </layer-list>
3.原理
关键是layer-list的使用:layer-list中可以写多个item,从上到下的item最后层叠效果为坐标轴Z轴方向,先写的item在最底层,后写的item在它上面依次覆盖。最后将layer-list作为background设置既可。相关文章推荐
- iOS如何为圆角添加阴影效果示例代码
- iOS设置圆角矩形和阴影效果
- 模拟阴影效果纯CSS圆角矩形
- iOS设置圆角矩形和阴影效果
- CSS3 创建圆角边框及矩形添加阴影
- Bootstrap中实现圆角、圆形头像和响应式图片/css3圆角、图片阴影效果总结
- iOS 高效添加圆角效果实战讲解
- CSS3--多列布局、边框颜色、圆角、渐变效果、阴影反射
- 组件底部添加阴影
- iOS 高效添加圆角效果实战讲解
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
- iOS开发-添加圆角效果高效实现
- imageView阴影和圆角效果的处理
- 圆角效果.--带阴影
- UI09-UIView视图添加圆角效果
- 让ie6/7/8兼容css3的圆角阴影等特殊效果的方法 PIE1.0.0及placeholder在这些IE下生效的方法
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
- Android5.x新特性之CardView立体卡片--阴影、圆角
- 设置ul阴影效果和边框圆角
- 圆角效果 border-radius——阴影 box-shadow——为边框应用图片 border-image