.score { background-color: #0033cc; width: 200px; height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 10px; } .score h2 { font-size: 72px; color: white; margin: 0; } .score button { background-color: white; color: #0033cc; padding: 10px 20px; border-radius: 5px; border: none; margin-top: 20px; } .score button:hover { background-color: #e6e6e6; }
以上是实现篮球记分效果所需要的 CSS 代码,代码中有几个比较重要的部分需要解释一下:
- display: flex; :这个属性设置了容器使用 Flexbox 布局,这样使得大家可以很方便地控制篮球分数和按钮的位置;
- justify-content: center; 和 align-items: center; :这两个属性分别设置了容器的水平和垂直居中;
- border-radius: 10px; :这个属性设置了容器的圆角,让整个记分板看起来更美观。
通过以上 CSS 代码的设置,大家就可以得到一个非常棒的篮球记分效果了,用户可以通过点击按钮来修改分数。