css 上下边框设置图片

可以使用CSS的border-image属性来设置上下边框的图片，具体的代码如下：

border-image: url(border.png) 30 30 round;

其中，url()中的图片路径可以根据实际情况进行修改，30 30表示图片的边框宽度，round表示图片的边框样式。

相关问题

CSS中border可以设置哪些属性

在CSS中，border可以设置以下属性：

1. border-width：边框的宽度，可以设置单独的上下左右边框，也可以设置所有边框的宽度。

2. border-style：边框的样式，可以设置单独的上下左右边框，也可以设置所有边框的样式。

3. border-color：边框的颜色，可以设置单独的上下左右边框，也可以设置所有边框的颜色。

4. border-top、border-right、border-bottom、border-left：分别设置边框的上、右、下、左四个方向的属性，包括width、style、color。

5. border-radius：边框圆角的大小，可以分别设置上下左右四个角的大小，也可以同时设置所有角的大小。

6. border-image：使用图片来定义边框样式，可以设置图片路径、边框宽度、边框样式、边框切割方式等属性。

盒子模型练习：高、宽自定，给盒子添加背景图片，盒左右加红色点线边框，上下加蓝色实线边框，内边距为20px，盒子在窗口居中显示。

以下是HTML和CSS代码，可以实现高、宽自定，给盒子添加背景图片，盒左右加红色点线边框，上下加蓝色实线边框，内边距为20px，盒子在窗口居中显示的效果：

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

.box {
  width: 400px; /* 宽度自定 */
  height: 300px; /* 高度自定 */
  background-image: url("your-image-url"); /* 添加背景图片 */
  background-size: cover; /* 背景图片自适应 */
  border-top: 2px solid blue; /* 上边框为蓝色实线 */
  border-bottom: 2px solid blue; /* 下边框为蓝色实线 */
  border-left: 2px dotted red; /* 左边框为红色点线 */
  border-right: 2px dotted red; /* 右边框为红色点线 */
  padding: 20px; /* 内边距为20px */
  margin: auto; /* 盒子在窗口居中显示 */
}