淘先锋技术网

首页 1 2 3 4 5 6 7

CSS图片加描边是一种常见的美化网页效果,使页面图片更加鲜明突出。下面是如何使用CSS为图片添加描边。

img {
border: 3px solid black;
/* 描边样式为3像素宽的黑色实线 */
padding: 5px;
/* 图片padding使得描边边缘不会与周围内容相接触 */
}

在上述代码中,我们先选择图片元素,然后使用CSS的border属性来定义描边样式。你可以根据喜好调整描边宽度和颜色。padding属性可以让图片周围留出一定空白,避免描边与周围内容重叠。

除了简单的实线描边,CSS还支持多种描边类型,如虚线、点线等,同时,你还可以使用CSS的box-shadow属性为图片添加阴影效果,进一步提升页面的视觉效果。

img {
border: 3px dashed #333;
/* 描边样式为3像素宽的虚线,颜色为深灰色 */
padding: 5px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
/* 使用2px的水平、垂直偏移以及8px的模糊半径和0.5的透明度创建阴影效果 */
}

通过为图片添加描边和阴影效果,你可以让页面看起来更加美观、专业,吸引更多读者的注意。