weex align-self align-items

2021-10-16  本文已影响0人  菜鸟何时起飞

使用这个两个属性 父容器必须有宽度 或者宽度能够被计算出来

<div class="card-box">
      <div class="first-card" />
      <div class="second-card" />
      <div class="main-card" />
 </div>
.card-box {
  height: 320px;
  width: 678px;
  align-items: center;
}

.first-card {
  width: 638px;
  height: 290px;
  background-image: linear-gradient(-148deg, #FFD8BF, #FFB7D1);
  position: absolute;
  border-radius: 40px;
}

.second-card {
  width: 658px;
  height: 290px;
  background-image: linear-gradient(-148deg, #FFCFB0, #FD95BA);
  position: absolute;
  top: 12px;
  border-radius: 40px;
}

.main-card {
  width: 678px;
  height: 290px;
  background-image: linear-gradient(-148deg, #FEAB76, #F95E95);
  box-shadow: 0 10px 30px 0px rgba(255,173,149,0.50);
  top: 30px;
  border-radius: 40px;
}
上一篇 下一篇

猜你喜欢

热点阅读