通过构建计算器来了解CSS border-radius属性

Have you ever seen a button on a web page that has rounded edges? Have you ever seen an image that fits within a circle? If so, you have seen the impact of using the CSS border-radius property.

您是否见过网页上具有圆形边缘的按钮？ 您是否看过适合圆圈的图像？ 如果是这样，您已经看到了使用CSS border-radius属性的影响。

You can give any element “rounded corners” by applying a border-radius through CSS.

您可以通过CSS应用边框半径来给任何元素“圆角”。

边界半径语法 (Border-radius syntax)

As with many CSS properties relating to margins, padding, and borders, there are four individual properties — one for each corner of a box element — and one shorthand property. Each of the corner attributes will accept one or two values.

与许多与边距，填充和边框有关CSS属性一样，有四个单独的属性-一个用于box元素的每个角-一个速记属性。 每个角属性将接受一个或两个值。

The border-radius property is accepted in every major browser, but they have browser-specific attributes. Here are the CSS and browser-specific attributes:

每个主要浏览器都接受border-radius属性，但是它们具有浏览器特定的属性。 以下是CSS和特定于浏览器的属性：

Each of the individual corner CSS3 properties take either one or two length values (generally ‘px’ or ‘em’ values). If a single value is supplied, then that becomes the radius of a rounded corner. If two values are supplied, then they become the horizontal and vertical radii for an elliptical corner.

每个单独CSS3角属性均采用一个或两个长度值(通常为“ px”或“ em”值)。 如果提供单个值，则该值将成为圆角的半径。 如果提供两个值，则它们将成为椭圆角的水平和垂直半径。

The border-radius property by itself accepts one or two values and uses them to style all four corners making a nice symmetrical shape.

border-radius属性本身可以接受一个或两个值，并使用它们来对所有四个角进行样式化，从而形成对称的形状。

您是否需要使用边界前缀了？ (Do you need to use border-prefixes anymore?)

Now that I have shown you the browser-specific border prefixes, the question is do you really need to use them, or can you get away with just using the CSS3 properties?

既然我已经向您展示了浏览器特定的边框前缀，那么问题是您是否真的需要使用它们，还是仅使用CSS3属性就可以摆脱困境？

The simple answer to that question depends on what version of browsers your website supports.

该问题的简单答案取决于您的网站支持哪种版本的浏览器。

Firefox 3.6 requires the use of the -moz- prefix. From 4 up, using the CSS3 properties are fine.

Firefox 3.6需要使用-moz-前缀。 从4开始，使用CSS3属性就可以了。

Safari 4 needs the -webkit- prefix. Safari 5 and above accepts the CSS3 properties.

Safari 4需要使用-webkit-前缀。 Safari 5及更高版本接受CSS3属性。

iOS3 needs the -webkit- prefix. This applies only to an iPhone 3GS or iPad 1 that have never been upgraded.

iOS3需要-webkit-前缀。 这仅适用于从未升级的iPhone 3GS或iPad 1。

边界半径属性的基本演示 (Basic Demonstration of the border-radius property)

Here are two demonstrations of the border radius. The value supplied for the property can be in px, rem, em or %.

这是边界半径的两个演示。 为属性提供的值可以是px，rem，em或％。

div {    width: 100px;    height: 100px;    background-color: #7db9e8;}#demo-one {    border-radius: 20px;}#demo-two {    border-radius: 50%;}

For the first div, a rounded corner of 8px is applied to every corner of the div. In the second example, every corner has a rounded corner of 50% applied which creates a circle.

对于第一个div，将8px的圆角应用于div的每个角。 在第二个示例中，每个角都应用了50％的圆角，从而创建了一个圆。

With just one value, the border-radius will be the same on all four corners of an element as shown above. You do have the option of specifying a different value for each corner.

仅使用一个值，边界半径将在元素的所有四个角上相同，如上所示。 您确实可以为每个角指定不同的值。

When you specify individual values, then they are applied in this order: top left, top right, bottom right, bottom left. Here is an example:

当您指定单个值时，它们将按以下顺序应用：左上，右上，右下，左下。 这是一个例子：

#demo-three {    border-radius: 10em 20em 10em 20em;}#demo-four {    border-radius: 40px 5px;}

椭圆边 (Elliptical Edges)

The edges do not have to be circular, but can be elliptical, too. To create an elliptical edge, you put a slash (“/”) between two values. Here is an example:

边缘不必是圆形的，但也可以是椭圆形的。 要创建椭圆边缘，请在两个值之间放置一个斜杠(“ /”)。 这是一个例子：

#demo-five {    border-radius: 10% / 50%;}#demo-six {    border-radius: 50% / 10%;}

创建我们的计算器 (Creating our calculator)

We are going to apply what we have just learned about border-radius to create this calculator:

我们将应用我们刚刚学到的关于边界半径的知识来创建此计算器：

计算器框架 (Calculator Frame)

First we need to create the frame for our calculator. The top of the calculator will have an arch and the bottom will have rounded edges. To create this design we will specify a value for each individual corner like this:

首先，我们需要为计算器创建框架。 计算器的顶部将具有拱形，底部将具有圆形边缘。 要创建此设计，我们将为每个单独的角指定一个值，如下所示：

.calc-frame {    display: flex;    flex-direction: column;    align-items: center;    max-height: 650px;    max-width: 400px;    width: 90%;    padding: 20px;    border: solid 5px #41403E;    border-top-left-radius: 270px 100px;    border-top-right-radius: 270px 100px;    border-bottom-right-radius: 35px;    border-bottom-left-radius: 35px;    background: #b1b1b1;}

计算器结果框 (Calculator result frame)

The top of the calculator contains the total that has been calculated (the result). It is comprised of two parts: the outer frame and the input area that contains the total. The outer frame uses the exact same border-radius of the frame to have the same arch. Here is the styling for these two items:

计算器的顶部包含已计算的总数(结果)。 它由两部分组成：外部框架和包含总数的输入区域。 外框使用与框完全相同的边界半径以具有相同的弧度。 这是这两个项目的样式：

.calc-result-frame {    background: #fefefe;    border: solid 5px #41403E;    width: 100%;    height: 150px;    border-top-left-radius: 270px 100px;    border-top-right-radius: 270px 100px;    border-bottom-right-radius: 10px;    border-bottom-left-radius: 10px;    display: flex;    justify-content: center;    align-items: flex-end;}.calc-result-input {    width: 85%;    height: 70px;    text-align: right;    color: #41403E;    overflow: hidden;    font-size: 2rem;

计算器徽标和电源按钮 (Calculator Logo and Power Button)

The next items to add to our calculator are the logo, “BLAND INSTRUMENTS,” and the power button. We will use the code in #demo-four for the logo and the code in #demo-two for the power button. It looks like this:

接下来要添加到计算器中的项是徽标，“ BLAND INSTRUMENTS”和电源按钮。 我们将使用＃demo-four中的代码作为徽标，并使用＃demo-two中的代码作为电源按钮。 看起来像这样：

.calc-logo {    background: #41403e;    color: #e8eff0;    border: solid px #41403E;    border-radius: 40px 5px;    width: 250px;    height: 50px;    line-height: 50px;    font-weight: bold;    text-align: center;}.calc-on {    border-radius: 50%;    border: none;    background: #bb0f29;    color: #fefefe;    width: 50px;    height: 50px;}

计算器按钮 (Calculator Buttons)

Next we are going to create styling for each calculator button. We are going to specify a style for each individual corner, and then provide two values for each corner. This produces a hand-drawn look and feel for the buttons. Here is the code:

接下来，我们将为每个计算器按钮创建样式。 我们将为每个单独的角指定一种样式，然后为每个角提供两个值。 这会产生按钮的手绘外观。 这是代码：

.calc-btn {    background: transparent;    color: #41403E;    font-size: 2rem;    width: 75px;    height: 75px;    outline: none;    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;    border: solid 7px #41403E;    flex: 1;    transition: all .5s ease;}

输入按钮 (Enter button)

The last thing we need to add to our calculator is the ENTER button. We will be using the code from #demo-one for this button. Here is the code:

我们需要添加到计算器中的最后一件事是ENTER按钮。 我们将使用＃demo-one中的代码来实现此按钮。 这是代码：

.calc-enter {    background: #bb0f29;    color: #fefefe;    border-radius: 20px;    border: none;}

按钮动画 (Button Animation)

The last thing we are going to add to our calculator is animation for each button when a user hovers over the button. This simulates the action of the button actually being pressed.

我们要添加到计算器中的最后一件事是当用户将鼠标悬停在按钮上时每个按钮的动画。 这模拟了实际按下的按钮的动作。

To accomplish this we are going to add a box-shadow to our buttons. This is the shadow that will be shown for all buttons, and gives the buttons the appearance of being slightly raised from the calculator frame.

为此，我们将在按钮上添加一个阴影框。 这是所有按钮都会显示的阴影，并使按钮看起来从计算器框架稍微抬起。

To provide the animation, we are going to add a transition to the button. Then we will supply a different box-shadow for the buttons when a user hovers over them. Here is the code:

为了提供动画，我们将向按钮添加一个过渡。 然后，当用户将鼠标悬停在按钮上方时，我们将为按钮提供不同的框阴影。 这是代码：

.calc-btn {    background: transparent;    color: #41403E;    font-size: 2rem;    width: 75px;    height: 75px;    outline: none;    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;    border: solid 7px #41403E;    flex: 1;    box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);    transition: all .5s ease;}.calc-btn:hover {    box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);}

And here is our finished calculator:

这是我们完成的计算器：

获取代码 (Get The Code)

If you would like to see the complete code for the calculator you can get it from my GitHub repo here. Please star my repo when you get the code!

如果您想查看计算器的完整代码，可以从我的GitHub存储库中获取它。 收到代码后，请在我的存储库上加注星标！

The code uses Flexbox for the layout of the calculator. If you are not familiar with Flexbox or want to review it, you can check out my free training course on Flexbox on in5days.tech.

该代码使用Flexbox布置计算器。 如果您不熟悉Flexbox或想对其进行审查，可以在in5days.tech上查看有关Flexbox的免费培训课程。

谢谢阅读 (Thanks for reading)

Thank you for reading my article. If you like it, please click on the clap icon below so that others will find this article.

感谢您阅读我的文章。 如果喜欢，请单击下面的拍手图标，以便其他人可以找到本文。

Here are more of my articles that you might find interesting:

这是我可能会发现有趣的更多文章：

Here are 5 Layouts That You Can Make With FlexBoxThink outside the box with CSS shape-outsideWhy Company Culture is Important to Your Career as a Software Engineer

以下是您可以使用FlexBox制作的5种布局： CSS形状外在框外思考 为什么公司文化对您作为软件工程师的职业很重要

翻译自: https://www.freecodecamp.org/news/learn-css-border-radius-property-by-building-a-calculator-53497cd8071d/