如何为图像添加边框图像框
还可以添加图像作为边框。
为此，CSS 有一个 border-image 属性，它允许将图像指定为元素周围的边框。
我们可以通过以下方式定义如何重复边框图像：
- 拉伸 - 图像被拉伸以填充区域（这是默认值），
- 重复 - 重复图像以填充该区域，
- round - 重复图像以填充该区域（如果它没有用整数个图块填充该区域，则重新缩放图像以使其适合），
- 空间 - 重复图像以填充该区域（如果它没有用整数个图块填充该区域，则另外的空间分布在图块周围）。
添加边框图像框架的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 80%;
height: 300px;
margin-bottom: 20px;
background: url("/bg.jpg") no-repeat;
background-size: cover;
}
img {
width: 30%;
height: 30%;
}
.border-one {
border: 20px solid transparent;
border-image: url("/bg.jpg") 50 round;
}
.border-two {
border: 20px solid transparent;
border-image: url("/bg.jpg") 35% round;
}
.border-three {
border: 20px solid transparent;
border-image: url("/bg.jpg") 100% round;
}
.border-four {
border: 20px solid transparent;
border-image: url("/bg.jpg") 20 stretch;
}
</style>
</head>
<body>
<div class="border-one"></div>
<div class="border-two"></div>
<div class="border-three"></div>
<div class="border-four"></div>
<hr>
<p>Here is the oroirnal image:</p>
<img src="/bg.jpg" alt="Border">
</body>
</html>
添加 CSS
- 设置框架的高度和宽度。
- 使用边框速记属性指定边框的样式、宽度和颜色。
- 设置背景色。
- 将边距设置为“自动”，并将填充设置为两个值。
第一个值设置顶部和底部，第二个值设置右侧和左侧。
- 将图像的宽度和高度设置为 100%。
.frame {
width: 300px;
height: 250px;
border: 3px solid #ccc;
background: #eee;
margin: auto;
padding: 15px 10px;
}
img {
width: 100%;
height: 100%;
}
现在，我们可以看到完整的示例。
在图像周围添加框架的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.frame {
width: 300px;
height: 250px;
border: 3px solid #ccc;
background: #eee;
margin: auto;
padding: 15px 10px;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="frame">
<img src="/bg.jpg" alt="Nature">
</div>
</body>
</html>
如果要为图像制作圆形边框，则需要将边框所有边的边框半径设置为 50%。
根据要求设置边框颜色、边框样式、边框宽度属性。
不要忘记将溢出属性设置为“隐藏”以使图像的其余部分不可见。
在图像周围添加圆形框架的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.circle {
border-color: #666 #1c87c9;
border-image: none;
border-radius: 50% 50% 50% 50%;
border-style: solid;
border-width: 25px;
height: 200px;
width: 200px;
overflow: hidden;
}
img {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="circle">
<img src="/bg.jpg" alt="Nature">
</div>
</body>
</html>
我们可以通过更改 border-radius 和 border-color 属性来获得不同的输出。
例如，如果你想要一个方形框架，你只需要将所有边的border-radius设置为0。
在图像周围添加方框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.square {
height: 200px;
width: 200px;
border-color: #666 #1c87c9;
border-image: none;
border-radius: 0 0 0 0;
border-style: solid;
border-width: 30px;
}
img {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="square">
<img src="/bg.jpg" alt="Nature">
</div>
</body>
</html>
如果我们想为特定的角设置圆角，请将要圆角的角的边框半径设置为 50 像素。
在这种情况下，还要根据图像大小更改宽度和高度。
添加带圆角的框架的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.rounded-borders {
height: 200px;
width: 300px;
border-color: #666 #8ebf42;
border-image: none;
border-radius: 50px 0 50px 0;
border-style: solid;
border-width: 20px;
}
img {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="rounded-borders">
<img src="/bg.jpg" alt="Nature">
</div>
</body>
</html>
在构建网页时，有些情况下我们希望在不使用 Photoshop 或者任何其他编辑器的情况下向图像添加框架。
CSS 可以解决这个问题，将我们喜欢的宽度和样式的彩色框架添加到图像中。
我们可以使用 CSS 边框、填充和背景属性围绕图像制作一个简单的框架。
创建 HTML
- 创建一个类名为“frame”的 <div> 元素。
- 在 <div> 元素中定义一个 <img> 标签。
- 设置图像的 alt 属性。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<div class="frame">
<img src="/bg.jpg" alt="Nature">
</div>
</body>
</html>
日期：2020-06-02 22:14:54 来源：oir作者：oir