css给div加上边框和下边框

可以使用CSS的border属性来给一个div元素加上边框和下边框，示例如下：

div {
  border: 1px solid black; /* 给div加上1像素宽度、黑色实线的边框 */
  border-bottom: 2px dotted red; /* 给div加上2像素宽度、红色虚线的下边框 */
}

其中，border属性的取值格式为`border: [border-width] [border-style] [border-color];`，分别表示边框宽度、边框样式和边框颜色。border-bottom属性只设置下边框的样式，其他属性与border相同。

相关问题

css input点击给外层div加边框

你可以在 input 元素的点击事件中，使用 JavaScript 代码获取到外层 div 元素，并给它添加边框样式。示例代码如下：

HTML 代码：

<div class="container">
  <input type="text" id="input">
</div>

CSS 代码：

.container {
  border: 1px solid #ccc;
  padding: 10px;
}

.container.active {
  border-color: blue;
}

JavaScript 代码：

const input = document.getElementById('input');
const container = input.parentNode;

input.addEventListener('click', function() {
  container.classList.add('active');
});

这样，当 input 元素被点击时，就会给外层 div 元素添加一个名为 "active" 的 CSS 类，从而改变它的边框样式。

css div设置渐变背景和渐变边框

可以使用 CSS 中的 linear-gradient() 函数来实现 div 的渐变背景和渐变边框。

下面是一个设置渐变背景和渐变边框的示例代码：

<div class="gradient-box"></div>

.gradient-box {
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom right, #ff0080, #ff8c00);
  border: 2px solid;
  border-image: linear-gradient(to bottom right, #ff0080, #ff8c00) 1;
}

在上面的代码中，使用 `background` 属性来设置 div 的渐变背景。`linear-gradient()` 函数中的参数 `to bottom right` 表示渐变方向为从左上角到右下角，`#ff0080` 和 `#ff8c00` 分别表示渐变的起始颜色和结束颜色。

使用 `border` 属性来设置 div 的边框，同时使用 `border-image` 属性来设置边框的渐变。`linear-gradient()` 函数中的参数同样表示渐变方向，`1` 表示边框宽度为 1 像素。

需要注意的是，`border-image` 属性在一些浏览器中可能不被支持，此时可以使用 `background-clip` 属性来实现相同的效果。代码如下：

.gradient-box {
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom right, #ff0080, #ff8c00);
  border: 2px solid transparent;
  padding: 2px;
  background-clip: content-box, border;
}

在上面的代码中，使用 `padding` 属性来为 div 添加内边距，同时将 `border` 属性的颜色设置为 `transparent`，使边框不可见。使用 `background-clip` 属性来指定背景的绘制区域，`content-box` 表示背景仅在内容区域绘制，`border` 表示背景在边框区域绘制。这样，就可以实现相同的渐变边框效果。