带有边框或者框架的图像使图像看起来更有影响力，并且与页面上的其他内容不同。
在这个片段中，我们将展示如何为图像添加边框。
<img> 元素具有 HTML5 中未使用的边框属性。
因此，我们建议改用 CSS 边框属性。
创建 HTML
- 在 <body> 部分，创建一个 <img> 元素并放置应该使用的图像的链接。
- 使用 alt 属性设置图像的名称，如果用户由于某种原因无法查看图像，该属性会提供有关图像的信息。
<img src="/bg.jpg" alt="Nature">
添加 CSS
- 为 <img> 元素添加样式。
- 定义图像的宽度。
- 借助 border 属性定义边框的宽度、样式和颜色。
img {
width: 270px;
border: 1px solid black;
}
为图像添加边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
width: 270px;
border: 1px solid black;
}
</style>
</head>
<body>
<img src="/bg.jpg" alt="Nature">
</body>
</html>
如何在图像边框下添加投影
要添加阴影，我们需要使用 box-shadow 属性。
此外，将显示属性设置为“块”。
添加阴影的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.nature {
display: block;
background: transparent;
padding: 8px;
border: 1px solid #ccc;
box-shadow: 10px 10px 10px #999;
}
</style>
</head>
<body>
<img src="/nature.jpeg" alt="Nature" class="nature">
</body>
</html>
如何为边框图像添加样式
要更改边框颜色，我们可以添加 CSS color 属性。
如果要创建双边框，则需要将 padding 属性添加到图像的样式中。
为图像添加双边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
width: 650px;
padding: 1px;
border: 1px solid #021a40;
}
</style>
</head>
<body>
<h2>Double Border Example</h2>
<img src="/bg.jpg" alt="Nature">
</body>
</html>
也可以使用不同内边框颜色的双边框。
为此，添加 background-color 属性。
图片双边框样式示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
width: 650px;
padding: 5px;
border: 8px solid #999999;
background-color: #e6e6e6;
}
</style>
</head>
<body>
<img src="/bg.jpg" alt="Nature">
</body>
</html>
在下一个示例中，我们为图像添加边框并使用彩色背景。
如果要增加框架的宽度，请添加更多填充。
用彩色背景构图图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.nature {
background: #b0afac;
padding: 12px;
border: 1px solid #999;
}
</style>
</head>
<body>
<img src="/bg.jpeg" height="256" alt="Nature" class="nature">
</body>
</html>
也可以用标题框住图像。
添加标题的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.img-frame-cap {
width: 200px;
background: #fff;
padding: 18px 18px 2px 18px;
border: 1px solid #999;
}
.caption {
text-align: center;
margin-top: 4px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="img-frame-cap">
<img src="/car.jpeg" width="200" height="256" alt="Nature">
<div class="caption">Nature</div>
</div>
</body>
</html>
我们还可以单独指定边框。
为此，请使用 CSS border-bottom、border-top、border-left 和 border-right 属性，并为每个属性设置不同的宽度值。
让我们看一个示例，其中将 border-bottom 属性设置为具有横幅效果。
单独指定边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
width: 225px;
border: 8px solid #ccc;
border-bottom: 130px solid #ccc;
}
</style>
</head>
<body>
<img src="/car.jpeg" alt="Nature">
</body>
</html>
要为图像边框添加样式，请将 border-style 属性添加到 <style> 元素。
使用 border-style 属性设置边框图像样式的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
width: 650px;
padding: 5px;
border: 12px #1c87c9;
border-style: dashed;
background-color: #eee;
}
</style>
</head>
<body>
<img src="/bg.jpg" alt="Nature">
</body>
</html>
如何指定每个角并创建圆形边框
要指定边框的每个角，我们需要使用 CSS border-radius 属性。
border-radius 属性可以有 1 到 4 个值。
让我们看一个有四个值的例子。
请记住，第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角。
指定图像边框的每个角的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
width: 650px;
padding: 2px;
border: 3px solid #1c87c9;
border-radius: 15px 50px 800px 5px;
}
</style>
</head>
<body>
<img src="/bg.jpg" alt="Nature">
</body>
</html>
与其尝试将图像嵌套在另一个元素中，或者在 photoshop 中编辑每个图像以实现图像边框的正确外观，我们需要将 border-radius 属性的值设置为“50%”或者“999em”。
设置相同的宽度和高度值。
为图像添加圆形边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div.imageborder {
border-radius: 999em;
width: 350px;
height: 350px;
padding: 5px;
line-height: 0;
border: 10px solid #000;
background-color: #eee;
}
img {
border-radius: 999em;
height: 100%;
width: 100%;
margin: 0;
}
</style>
</head>
<body>
<h2>Circle Border Example</h2>
<div class="imageborder">
<img src="/iceland.jpeg" height="350" width="350" alt="iceland"/>
</div>
</body>
</html>
日期：2020-06-02 22:14:54 来源：oir作者：oir