在网页开发过程中，给HTML图片添加合适的边框和阴影，能够有效提升页面的视觉层次感，让图片内容更突出。这两种效果的实现主要依赖CSS样式，不需要修改HTML图片本身的结构。
HTML图片边框设置方法
HTML图片的边框可以通过border相关CSS属性来设置，基础的边框设置包含三个核心参数：边框宽度、边框样式、边框颜色。
基础边框属性说明
- border-width：设置边框的宽度，单位可以是px、em等，比如3px表示3像素宽的边框。
- border-style：设置边框的样式，常见值有solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。
- border-color：设置边框的颜色，支持颜色名、十六进制色值、rgb值等格式。
我们可以直接使用border简写属性一次性设置这三个参数，示例代码如下：
/* 给class为demo-img的图片设置边框 */
.demo-img {
border: 3px solid #333333; /* 3像素宽、实线、深灰色边框 */
}
如果只需要单独设置某一个方向的边框，可以使用border-top、border-right、border-bottom、border-left属性，比如只给图片底部加边框：
.bottom-border-img {
border-bottom: 2px dashed #ff0000; /* 底部2像素虚线红色边框 */
}
HTML图片阴影设置方法
HTML图片的阴影效果通过CSS的box-shadow属性实现，这个属性可以给元素添加一个或多个阴影，参数设置相对灵活。
box-shadow参数说明
box-shadow的完整语法为：box-shadow: h-shadow v-shadow blur spread color inset;，各个参数的含义如下：
| 参数 | 说明 | 是否必填 |
|---|---|---|
| h-shadow | 水平阴影偏移量，正数表示阴影向右偏移，负数表示向左偏移，单位为px | 是 |
| v-shadow | 垂直阴影偏移量，正数表示阴影向下偏移，负数表示向上偏移，单位为px | 是 |
| blur | 阴影的模糊半径，值越大阴影越模糊，默认为0表示不模糊，单位为px | 否 |
| spread | 阴影的扩展半径，正数表示阴影扩大，负数表示阴影缩小，默认为0，单位为px | 否 |
| color | 阴影的颜色，支持各种颜色表示方式，默认颜色和浏览器相关 | 否 |
| inset | 将外部阴影改为内部阴影，不需要设置值，直接写inset即可 | 否 |
给图片添加基础外部阴影的示例代码如下：
/* 给图片添加向右下偏移5px、模糊3px、灰色的外阴影 */
.shadow-img {
box-shadow: 5px 5px 3px #cccccc;
}
如果需要添加内部阴影，只需要在参数最后加上inset即可：
/* 给图片添加内部阴影 */
.inset-shadow-img {
box-shadow: 0px 0px 10px 2px #999999 inset;
}
边框和阴影组合使用
实际开发中经常需要同时给图片设置边框和阴影，只需要把两个属性同时写在对应的CSS规则中即可，示例代码如下：
/* 同时设置边框和阴影 */
.img-with-border-shadow {
border: 4px solid #2c3e50; /* 4像素实线深蓝边框 */
box-shadow: 3px 3px 8px 1px rgba(0, 0, 0, 0.3); /* 向右下偏移3px、模糊8px、扩展1px、半透明黑色的阴影 */
}
对应的HTML图片标签只需要添加对应的class即可生效：
<img src="https://picsum.photos/200/300?random=2" alt="示例图片" class="img-with-border-shadow">
注意事项
- 设置
box-shadow属性不会影响页面布局，阴影不会占用文档流的空间。 - 如果图片本身设置了
border-radius圆角属性，边框和阴影也会跟随圆角样式显示。 - 阴影颜色如果使用rgba格式，可以通过调整最后一个透明度参数，让阴影效果更自然。
提示：所有样式需要写在<style>标签内或者外部CSS文件中，确保选择器能够正确匹配到对应的图片元素。
HTML图片边框box_shadowCSS修改时间：2026-07-23 04:45:24