前端学习＜二＞CSS基础——17-CSS3的常见边框汇总

CSS3提供了更多样化的边框样式，包括圆角、阴影、边框图片等。以下是一些CSS3的常用边框样式属性的示例代码：

/* 圆角 */
.box {
  border: 2px solid black;
  border-radius: 10px; /* 圆角大小 */
}
 
/* 阴影 */
.shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 水平偏移 垂直偏移 模糊半径 颜色 */
}
 
/* 边框图片 */
.border-image {
  border: 10px solid transparent;
  border-image-source: url('border.png');
  border-image-slice: 27; /* 分割图片的宽度 */
  border-image-width: 3px; /* 边框的宽度 */
  border-image-outset: 2px; /* 边框图像超出边框宽度 */
  border-image-repeat: stretch; /* 图像的平铺方式 */
}

在HTML中使用这些样式：

<div class="box">带圆角和阴影的盒子</div>
<div class="shadow">带阴影的盒子</div>
<div class="border-image">带边框图片的盒子</div>

这些代码演示了如何使用CSS3的边框样式来增强网页的视觉效果。