CSS计算器样式可以根据需求进行自定义设计，以下是一个简单的示例：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>CSS计算器</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" class="display" disabled>
<div class="buttons">
<button><span>+</span></button>
<button class="operator"><span>÷</span></button>
<button><span>7</span></button>
<button><span>8</span></button>
<button><span>9</span></button>
<button><span>×</span></button>
<button class="clear">C</button>
</div>
</div>
</body>
</html>
CSS代码：
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
border: 2px solid #ccc;
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
background-color: #fff;
padding: 20px;
}
.display {
width: 100%;
height: 40px;
margin-bottom: 10px;
text-align: right;
border: none;
outline: none;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
button {
font-size: 24px;
border: none;
outline: none;
cursor: pointer;
}
.operator {
grid-column: span 2;
}
.clear {
grid-column: span 2;
}
