通过构建计算器学习 CSS border-radius 属性

你是否见过网页上带有圆角的按钮？你是否见过位于圆形框内的图片？如果是，那么你已经见识过 CSS border-radius 属性的效果了。你可以通过 CSS 应用 border-radius 属性，为任何元素添加 圆角 。

边框半径语法

与许多涉及边距、内边距和边框的 CSS 属性一样，盒子元素的四个角分别对应四个独立的属性和一个简写属性。每个角属性都可以接受一个或两个值。

border-radius 属性在所有主流浏览器中都适用，但它们各自具有不同的浏览器特性。以下是 CSS 代码和浏览器特性：

CSS3 的每个 corner 属性都可以接受一个或两个长度值（通常为 'px' 或 'em' 值）。如果提供一个值，则该值将作为圆角的半径。如果提供两个值，则它们将分别作为椭圆角的水平半径和垂直半径。

border-radius 属性本身接受一个或两个值，并使用这些值来设置四个角的样式，从而形成一个漂亮的对称形状。

现在还需要使用边框前缀吗？

既然我已经向你展示了浏览器特定的边框前缀，那么问题是，你真的需要使用它们吗？还是只使用 CSS3 属性就可以了？这个问题的简单答案取决于您的网站支持哪些版本的浏览器。

• Firefox 3.6 需要使用 -moz- 前缀。从 4 版本开始，直接使用 CSS3 属性即可。
• Safari 4 需要 -webkit- 前缀。Safari 5 及更高版本支持 CSS3 属性。
• iOS 3 需要使用 -webkit- 前缀。这仅适用于从未升级过的 iPhone 3GS 或 iPad 1。

border-radius 属性的基本演示

以下是边框半径的两个示例。该属性的值可以以 px、rem、em 或 % 为单位。

第一个 div 元素的每个角都应用了 8px 的圆角。第二个例子中，每个角都应用了 50%的圆角，从而形成一个圆形。如果只设置一个值，元素四个角的边框半径将相同，如上图所示。您也可以为每个角指定不同的值。当您指定单个值时，将按以下顺序应用：左上、右上、右下、左下。例如：

椭圆边缘

边缘不一定是圆形，也可以是椭圆形。要创建椭圆形边缘，只需在两个值之间加上斜杠（ / ）。例如：

创建我们的计算器

我们将运用刚刚学到的关于边框半径的知识来创建这个计算器：

计算器框架

首先，我们需要为计算器创建框架。计算器的顶部将呈拱形，底部边缘将呈圆角。为了实现这种设计，我们将为每个角指定一个值，如下所示：

计算器结果框

计算器顶部显示计算出的总金额。它由两部分组成：外框和显示总金额的输入区域。外框使用与内框相同的圆角半径来呈现弧形。以下是这两个部分的样式：

计算器图标和电源按钮

接下来要添加到计算器中的元素是 BLAND INSTRUMENTS 的标志和电源按钮。我们将使用 #demo-four 中的代码来添加标志，使用 #demo-two 中的代码来添加电源按钮。效果如下：

计算器按钮

接下来，我们将为每个计算器按钮创建样式。我们将为每个角指定样式，并为每个角提供两个值。这样可以使按钮呈现出手绘风格。以下是代码：

进入按钮

最后，我们需要在计算器中添加 回车 按钮。我们将使用 #demo-one 中的代码来实现这个按钮：代码如下：

按钮动画

最后，我们要为计算器添加的是用户鼠标悬停在按钮上时的动画效果。这模拟了按钮被实际按下的动作。为了实现这一点，我们将为按钮添加阴影效果。所有按钮都会显示此阴影，使按钮看起来像是从计算器框架上略微凸起一样。为了实现动画效果，我们将为按钮添加过渡效果。然后，当鼠标悬停在按钮上时，我们将为按钮添加不同的阴影效果。以下是代码：

这就是我们最终完成的计算器：