html - 如何使用 "border"添加到图像边框

标签 html css

<分区>


关闭 7 年前

如果我给图像添加了边框,但我想要这个边框的边缘,我该怎么办?像这样:Image

  1. 绿色:图片
  2. 深蓝色:第一个边框
  3. 浅蓝色:第二个边框

最佳答案

使用CSS box-shadow 实现多边框。 , 分隔列表值用于分隔多个边框/阴影。 15px30px 是为每个边框/阴影的 spread-radius 表示的值。

.image {
  background: url('http://placehold.it/300x300');
  width: 300px;
  height: 300px;
  margin: 50px;
  box-shadow: 0 0 0 15px #3F48CC, 0 0 0 30px #00A2E8;
}
<div class="image"></div>

关于html - 如何使用 "border"添加到图像边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32508894/

上一篇:html - Flexbox 不显示页面的全宽

下一篇:javascript - 下拉列表不会与下拉按钮垂直对齐

相关文章:

javascript - 如何在 HTML 选择控件中设置系统字体?

javascript - 没有CSS的d3.js中的轴文本样式

html - 清除行内 block ?

html - 鼠标悬停时 css3 边距缩小

javascript - 将 td 值传递给 JavaScript

html - 自动调整到窗口大小的 CSS 按钮

html - CSS 下拉菜单在 Firefox 中滞后

javascript - 在离开页面之前自动滚动到同一位置?

javascript - 如何选择(突出显示)和复制有序列表编号

jquery - 自动完成中的滚动条