用html和css实现红绿灯控件的三种颜色需要可以便利的实现控制和切换；无任何切换状态时，需要考虑默认状态，默认状态色值外圈：#d9d9d9 60%，内圈：#d9d9d9 80%。

好的，我可以帮你回答这个问题。要实现红绿灯的控件，我们可以使用HTML和CSS，结合JavaScript来实现。下面是一个简单的红绿灯控件的实现方案：

HTML代码：

<div class="traffic-light">
  <div class="light red"></div>
  <div class="light yellow"></div>
  <div class="light green"></div>
</div>

CSS代码：

.traffic-light {
  width: 60px;
  height: 160px;
  background-color: #d9d9d9;
  border-radius: 10px;
  position: relative;
}

.light {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  left: 5px;
  right: 5px;
  margin: auto;
  transition: background-color 0.5s ease;
}

.red {
  background-color: #ff4d4f;
  top: 10px;
}

.yellow {
  background-color: #ffc107;
  top: 70px;
}

.green {
  background-color: #52c41a;
  top: 130px;
}

JavaScript代码：

var lights = document.querySelectorAll('.light');

function switchLight(idx) {
  for (var i = 0; i < lights.length; i++) {
    if (i === idx) {
      lights[i].classList.add('on');
    } else {
      lights[i].classList.remove('on');
    }
  }
}

// 初始状态
switchLight(-1);

// 点击红灯
document.querySelector('.red').addEventListener('click', function() {
  switchLight(0);
});

// 点击黄灯
document.querySelector('.yellow').addEventListener('click', function() {
  switchLight(1);
});

// 点击绿灯
document.querySelector('.green').addEventListener('click', function() {
  switchLight(2);
});

这个实现方案中，我们使用了一个 `div` 元素作为红绿灯控件的容器，然后在里面添加了三个 `div` 元素作为红灯、黄灯和绿灯，通过 CSS 样式来设置它们的位置、颜色和形状。在 JavaScript 中，我们监听了每个灯的点击事件，并通过 `switchLight` 函数来控制灯的亮灭状态。

另外，对于默认状态的设置，我们可以在 `.traffic-light` 样式中添加一些样式来达到要求：

.traffic-light::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #d9d9d9;
  border: 2px solid #d9d9d9;
  border-radius: 10px;
  box-sizing: border-box;
  z-index: -1;
}

.traffic-light::after {
  content: '';
  width: 80%;
  height: 80%;
  position: absolute;
  top: 10%;
  left: 10%;
  background-color: #d9d9d9;
  border-radius: 50%;
  z-index: -1;
}

这样就可以在初始状态下显示出默认状态的颜色了。