用CSS3写的模仿iPhone中的返回按钮

下面我就为你详细讲解“用CSS3写的模仿iPhone中的返回按钮”的攻略。

一、概述

我们在开发WebApp和移动端页面时，常常需要使用到类似于iPhone中的返回按钮。而且，我们也经常可以看到网站使用CSS写的返回按钮样式。本文就是通过CSS3来写一个模仿iPhone中的返回按钮。

二、实现步骤

1. 基本样式

首先，我们需要做的就是基本样式的定义。我们可以通过定义一个按键大小的正方形出发。然后，将这个正方形进行倾斜，从而呈现出一个更加符合iPhone风格的返回按钮。

.back-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ccc;
    transform: rotate(-45deg);
}

2. 绘制三角形

在下一步，我们需要根据这个正方形来绘制一个三角形。我们可以按照下面的方式来绘制一个三角形：

.back-btn:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(45deg);
}

现在，我们已经成功的绘制了一个三角形。接下来，我们只需要对样式进行微调即可实现其他的效果。

3. 其他效果

为了实现其他的效果，我们需要对上面的样式进行调整。我们可以通过类似于下面的代码进行调整：

.back-btn:hover {
    background-color: #222;
}
.back-btn:before {
    border-color: #222;
}

使用这样的方式进行定制之后，我们就可以获得和iPhone中的返回按钮一样的效果了。

三、示例说明

下面，我为你提供两个例子，来展示如何通过CSS3来制作更具有iPhone风格的返回按钮。

1. 示例一

.back-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ccc;
    transform: rotate(-45deg);
}

.back-btn:hover {
    background-color: #222;
}

.back-btn:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(45deg);
}

.back-btn:before {
    border-color: #222;
}

2. 示例二

.back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f2f2f2;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    transform: rotate(-45deg);
}

.back-btn:hover {
    background-color: #222;
    color: #fff;
}

.back-btn:before {
    content: "";
    position: absolute;
    top: 13px;
    left: 12px;
    width: 16px;
    height: 2px;
    background-color: #fff;
}

.back-btn:after {
    content: "";
    position: absolute;
    top: 12px;
    left: 7px;
    width: 2px;
    height: 16px;
    background-color: #fff;
}

.back-btn:before, .back-btn:after {
    transform: rotate(45deg);
}

四、总结

通过上述的攻略，现在你已经掌握了如何通过CSS3来写一个模仿iPhone中的返回按钮。在实际应用中，你可以将这个效果集成到你的WebApp和移动端页面中。同时，你也可以根据自己的需求对上述的样式进行进一步的调整。