怎么做一个div气泡 点击高亮边框为蓝色 背景为灰色

你可以使用CSS来实现这个效果。首先，你需要创建一个div元素，然后在CSS中设置它的样式。

HTML代码：

<div class="bubble">这是一个气泡</div>

CSS代码：

.bubble {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
}

.bubble:focus {
  outline: none;
  border-color: blue;
  box-shadow: 0 0 5px blue;
  background-color: #ddd;
}

解释一下上面的CSS代码：

- `.bubble` 类设置了气泡的基本样式，包括边框、圆角、背景色等。
- `:focus` 伪类表示气泡被聚焦时的样式，这里设置了边框颜色、阴影以及背景色。
- `outline: none;` 表示去掉聚焦时的默认边框。
- `cursor: pointer;` 表示鼠标移动到气泡上时显示手型光标。

这样，当你点击气泡时，它的边框会变成蓝色，背景色变成灰色。

相关问题

css气泡框三角形 并且背景颜色为灰色 边框为蓝色

您可以使用CSS伪元素来创建气泡框的三角形，并通过CSS属性设置背景颜色和边框颜色。以下是一个示例代码片段，您可以根据自己的需求进行修改：

<div class="bubble">
  <p>This is a bubble with a triangle.</p>
</div>

.bubble {
  display: inline-block;
  position: relative;
  background-color: #ccc;
  border: 2px solid blue;
  padding: 10px;
  border-radius: 5px;
}
.bubble::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent blue transparent transparent;
}

在上面的代码片段中，`.bubble`类定义了气泡框的样式，包括背景颜色、边框颜色、内边距和圆角。`.bubble::before`伪元素用于创建三角形，通过设置`border-color`属性来控制三角形的颜色。您可以根据需要调整`border-width`和`margin-top`属性来改变三角形的大小和位置。

为一个有背景板颜色的滚动条内容做一个边框

你可以使用 CSS 的 border 属性为滚动条内容添加边框。首先，先为滚动条内容添加一个容器元素（比如 div），然后在 CSS 中为该容器元素设置 border 属性即可。

例如，假设你的滚动条内容的容器元素的类名为 "scroll-container"，背景颜色为灰色，边框颜色为白色，边框宽度为 2px，可以这样写：

.scroll-container {
  background-color: #ccc; /* 设置背景颜色 */
  border: 2px solid #fff; /* 设置边框 */
  padding: 10px; /* 设置内边距，避免内容与边框之间太靠近 */
}

这样就为滚动条内容添加了一个白色的边框，看起来更加美观。