css3做手机app界面 |css缩小按钮间距

为了使手机App界面更加美观，大家可以使用一些CSS3特性，比如弧形、渐变、阴影等等。下面是一个使用了这些特性的手机界面代码：

.app-wrapper {
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.app-header {
background: linear-gradient(to bottom, #474747, #2b2b2b);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.app-header h1 {
color: #fff;
font-size: 24px;
}
.app-header button {
border: 1px solid #fff;
background-color: transparent;
border-radius: 5px;
color: #fff;
padding: 5px 10px;
}
.app-body {
background-color: #f2f2f2;
padding: 20px;
}
.app-section {
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
overflow: hidden;
}
.app-section h2 {
background: linear-gradient(to right, #00b359, #66ccff);
color: #fff;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.app-card {
display: flex;
align-items: center;
padding: 10px;
}
.app-card img {
width: 50px;
height: 50px;
}
.app-card h3 {
font-size: 18px;
margin-left: 10px;
}

在代码中，大家使用了许多CSS3特性来做手机App界面。比如，大家使用了border-radius属性来实现圆角效果，使用了box-shadow属性来实现阴影效果，使用了background属性来实现渐变效果。

此外，大家还使用了flexbox布局来实现界面的自适应布局，使得大家能够在不同尺寸的移动设备上都能够保持App的美观。

总的来说，CSS3是一个非常强大的样式语言，它能够让大家创建出美观、炫酷的手机App界面。