HTML代码：

<img src="https://files.getquicker.net/_sitefiles/_guides/66ac708c-895b-40bc-6d9c-08da16da9c3c/2023/10/03/235017_202824_1.jpg" class="bordered-image-1" width=200>

CSS代码：

<style>
.bordered-image-1 {
border: 2px solid #DCDCDC; /* 设置边框的宽度、样式和颜色 */
padding: 10px; /* 设置内边距，使边框与图像之间存在一定的间隔 */
}
</style>

加阴影 / 圆角效果：

在style中添加定义：

可以用16进制色或者RGB色来显示阴影色：

box-shadow: 4px 4px 8px #FF3C3C; /* 添加阴影效果 */

box-shadow: 4px 4px 8px rgba(255, 60, 60, 0.5); /*--- 添加阴影效果 --*/

border-radius: 5px; /* 设置圆角半径 */

overflow: hidden; /* 隐藏超出边框的部分 */

学习要点：

box-shadow属性的值由四个参数组成，分别是：

水平偏移量（4px）

垂直偏移量（8px）

模糊半径（38px）

阴影颜色（gray）。