css模板水果 |css 多重伪类

/* 水果图标 */
.icon-apple {
background-image: url("apple.png");
}
.icon-banana {
background-image: url("banana.png");
}
.icon-orange {
background-image: url("orange.png");
}
/* 水果背景 */
.fruit-bg {
background-image: url("fruit-bg.jpg");
background-size: cover;
background-position: center center;
}
/* 水果按钮 */
.fruit-btn {
background-color: #f8bc58;
padding: 10px 20px;
border-radius: 20px;
color: white;
font-weight: bold;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
/* 水果列表 */
.fruit-list {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.fruit-item {
margin: 10px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
}
.fruit-item:hover {
box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
transform: scale(1.1);
}
/* 水果标题 */
.fruit-title {
font-size: 36px;
font-weight: bold;
text-align: center;
color: #f8bc58;
}

以上代码展示了一些常用的水果效果，包括水果图标、背景、按钮、列表和标题等。通过CSS样式的调整，可以为网页添加更具吸引力的水果元素，让用户在浏览时感到愉悦和舒适。