我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！

你曾经在网页上看到过有圆角边的按钮吗?你曾经见过一个可以放进圆里的图像吗?如果是这样，你已经看到了使用CSS border-radius属性的影响。我们可以通过CSS应用边界半径给任何元素赋予“圆角”，下面我们将border-radius来创建这个计算器:

计算器框架

首先，我们需要为计算器创建框架。计算器的顶部是拱形的，底部是圆角的。为了创建这样的设计，我们将为每个角指定一个值，像这样:

.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;
}

这是成果图

计算器结果框架

计算器的顶部包含已计算的总数(结果)。它由两部分组成:外部框架和包含总数的输入区域。外框使用完全相同的边界半径的框架具有相同的拱形。下面是这两项的样式:

.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;
}

计算器标志和电源按钮

接下来要添加到计算器的项是标志“BLAND INSTRUMENTS”和电源按钮。我们将使用#demo- 4中的代码来设置logo，使用#demo- 2中的代码来设置电源按钮。它看起来是这样的:

.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;
}

计算器按钮

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

.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按钮。我们将使用#demo-one中的代码来创建这个按钮。下面是代码:

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

按钮的动画

我们要添加到计算器的最后一件事是，当用户将鼠标悬停在按钮上时，每个按钮的动画。这模拟了实际按下按钮的动作。 为了实现这一点，我们要给按钮添加一个框影。这是将为所有按钮显示的阴影，并使按钮的外观略高于计算器框。 为了提供动画，我们将向按钮添加一个过渡。然后，当用户悬停在按钮上时，我们将为按钮提供不同的框影。下面是代码:

.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);
}