首页 > Web开发 > 详细

css简易卡片

时间:2021-07-13 23:10:22      阅读:16      评论:0      收藏:0      [点我收藏+]
<div class="card-color">
              <div class="dis-flex">
                <div>
                  <p><span>100</span>万元</p>
                  <p>医疗总费用</p>
                </div>
                <img
                  src="../../../assets/images/out/moneyBag.png"
                  class="imageSize"
                  
                />
              </div>
            </div>
 
 
 
<style scoped>
.card-color {
  padding: 0px 20px 0px 20px;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #ffffff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  background-image: linear-gradient(to right, #0066ff, #5599ff); //从左到右,颜色渐变
  box-shadow: 2px 6px 4px #888888; // 从左往右,从上往下添加阴影
}
.dis-flex {
  display: flex;
  justify-content: space-between; 
  align-items: center;  //垂直居中
}
.imageSize {
  width: 50px;
  height: 50px;
}

</style>

css简易卡片

原文:https://www.cnblogs.com/magichu/p/15008435.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!