css3 给图片加边框

时间2023-12-05 03:43:03发布访客分类CSS浏览1041

导读：CSS3 可以通过 border 属性来给图片加边框，下面就来介绍一下如何编写 CSS3 边框样式。首先，需要在 HTML 中添加一个 img 标签，并设置其 src 属性为图片的链接，如下所示：<img src="image.jpg...

CSS3 可以通过 border 属性来给图片加边框，下面就来介绍一下如何编写 CSS3 边框样式。
首先，需要在 HTML 中添加一个 img 标签，并设置其 src 属性为图片的链接，如下所示：

img src="image.jpg" />

接下来，在 CSS 文件中，使用以下代码来添加一个灰色实线边框：

p {
    border: 1px solid gray;
}

这里的 border 属性包括三个值，分别是边框宽度、边框样式和边框颜色。其中，1px 是边框宽度，solid 是边框样式，表示实线，gray 是边框颜色。
如果想要添加双线边框，可以使用以下代码：

p {
    border: 3px double black;
}

其中，double 表示双线边框，black 表示边框颜色。
如果想要添加虚线边框，可以使用以下代码：

p {
    border: 2px dotted blue;
}

其中，dotted 表示虚线边框，blue 表示边框颜色。
如果想要自定义边框样式，可以使用 border-style 属性和 border-color 属性来进行设置，如下所示：

p {
    border: 1px;
    border-style: dotted solid;
    border-color: blue red;
}

这里的 border-style 属性定义了两种边框样式，分别是虚线和实线，用空格隔开；border-color 属性定义了两种颜色，分别是蓝色和红色。
通过以上代码，就可以在图片周围添加不同的边框效果了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！