css 图片边框效果图

CSS中的图片边框效果可以通过样式表中的border属性来实现。下面是一些常见的图片边框效果及其对应的代码示例：

/* 实线边框 */
img {
  border: 2px solid black;
}

/* 虚线边框 */
img {
  border: 2px dashed black;
}

/* 圆角边框 */
img {
  border-radius: 5px;
  border: 2px solid black;
}

/* 阴影边框 */
img {
  Box-shadow: 3px 3px 5px grey;
  border: 2px solid white;
}

/* 破碎边框 */
img {
  border: 10px solid transparent;
  -webkit-border-image: url(border.png) 30 round; /* Safari 5.1-6 */
  -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
  border-image: url(border.png) 30 round;
}

通过CSS的边框属性可以轻松地为图片添加各种边框效果，许多时候这些效果可以为网页美化带来极佳的效果。