效果展示
CSS 知识点
box-shadow 属性灵活运用 background 属性的 linear-gradient 值灵活运用
页面整体结构
< div class = " container" >
< div class = " card" >
< div class = " icon" >
< ion-icon name = " rocket-outline" > </ ion-icon>
</ div>
< div class = " content" >
< h2> Card One</ h2>
< p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
excepturi omnis pariatur sed mollitia, tempore totam. Mollitia culpa
iusto, ea ullam quo tenetur esse rerum illum atque voluptatem beatae
dolor!
</ p>
</ div>
</ div>
</ div>
定义卡片容器样式
.card {
position : relative;
width : 320px;
height : 450px;
margin : 30px;
background : #287bff;
border-radius : 20px;
border-bottom-left-radius : 160px;
border-bottom-right-radius : 160px;
box-shadow : 0 15px 0 #fff, inset 0 15px 0 rgba ( 255, 255, 255, 0.25) ,
0 45px 0 rgba ( 0, 0, 0, 0.15) ;
overflow : hidden;
display : flex;
justify-content : center;
align-items : flex-start;
}
创建卡片白色亮光部分样式
.card::before {
content : "" ;
position : absolute;
top : -140px;
left : -40px;
width : 100%;
height : 120%;
background : linear-gradient ( 90deg, transparent, rgba ( 255, 255, 255, 0.2) ) ;
transform : rotate ( 35deg) ;
filter : blur ( 5px) ;
}
设置每个卡片对应的渐变颜色
.card:nth-child(1) {
background : linear-gradient ( to bottom, #ff2ae0, #645bf6) ;
}
.card:nth-child(2) {
background : linear-gradient ( to bottom, #ffec61, #f321d7) ;
}
.card:nth-child(3) {
background : linear-gradient ( to bottom, #24ff72, #9a4eff) ;
}
编写卡片头部的弯曲部分样式
.icon {
position : relative;
width : 140px;
height : 120px;
background : #3c2846;
border-bottom-left-radius : 100px;
border-bottom-right-radius : 100px;
box-shadow : 0 10px 0 rgba ( 0, 0, 0, 0.1) , inset 0 -8px 0 #fff;
z-index : 1000;
display : flex;
justify-content : center;
align-items : flex-start;
}
.icon::before {
content : "" ;
position : absolute;
top : 0;
left : -50px;
width : 50px;
height : 50px;
background : transparent;
border-top-right-radius : 50px;
box-shadow : 15px -15px 0 15px #3c2846;
}
.icon::after {
content : "" ;
position : absolute;
top : 0;
right : -50px;
width : 50px;
height : 50px;
background : transparent;
border-top-left-radius : 50px;
box-shadow : -15px -15px 0 15px #3c2846;
}
编写头部 ICON 样式
.icon ion-icon {
color : #fff;
font-size : 5em;
position : relative;
z-index : 10000;
--ionicon-stroke-width : 24px;
}
编写内容样式
.content {
position : absolute;
width : 100%;
padding : 30px;
padding-top : 140px;
text-align : center;
}
.container h2 {
font-size : 1.75em;
color : #fff;
margin-bottom : 10px;
}
.container p {
color : #fff;
line-height : 1.5;
}
完整代码下载
完整代码下载