CSS 點(diǎn)擊按鈕數(shù)值聯(lián)動(dòng)是一種常用的前端交互效果。它可以幫助用戶快速地調(diào)整頁(yè)面上的數(shù)值，從而獲得更好的用戶體驗(yàn)。

// HTML 代碼
<div class="wrapper">
<div class="box"></div>
<button class="btn plus">+</button>
<button class="btn minus">-</button>
</div>
// CSS 代碼
.wrapper {
display: flex;
align-items: center;
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 0 20px;
}
.btn {
background-color: blue;
color: #fff;
border: none;
font-size: 24px;
width: 50px;
height: 50px;
cursor: pointer;
}
.plus {
border-radius: 50% 0 0 50%;
}
.minus {
border-radius: 0 50% 50% 0;
}
// JavaScript 代碼
var box = document.querySelector('.box');
var plusBtn = document.querySelector('.plus');
var minusBtn = document.querySelector('.minus');
var value = 0;
plusBtn.addEventListener('click', function() {
value++;
box.style.width = value + 'px';
});
minusBtn.addEventListener('click', function() {
value--;
box.style.width = value + 'px';
});

上面的代碼演示了一個(gè)簡(jiǎn)單的點(diǎn)擊按鈕數(shù)值聯(lián)動(dòng)效果。點(diǎn)擊“+”按鈕可以增加小方塊的寬度，點(diǎn)擊“-”按鈕可以減小小方塊的寬度。

這個(gè)效果的實(shí)現(xiàn)離不開(kāi) CSS 和 JavaScript。CSS 主要負(fù)責(zé)布局和樣式，JavaScript 主要負(fù)責(zé)交互邏輯。我們使用 flex 布局來(lái)讓小方塊和按鈕在容器中居中對(duì)齊。按鈕的樣式使用了背景色、字體顏色、邊框和圓角等屬性，使得它們看起來(lái)更加美觀。

JavaScript 則監(jiān)聽(tīng)了按鈕的點(diǎn)擊事件。每次點(diǎn)擊按鈕時(shí)都會(huì)更新數(shù)值，并把新的數(shù)值應(yīng)用到小方塊的寬度上。此外，我們?cè)?CSS 中給了“+”按鈕和“-”按鈕不同的圓角，使得它們看起來(lái)更像一個(gè)整體。