有没有办法在 css 中的图像之间添加虚线边框

Question

所以我是 html 和 css 的新手，想复制我在网上看到的一个设计来练习。但是，网站的这一部分包含由边框分隔的图像。我不确定是否可以使用常规 css 或我是否需要使用 javascript 或其他方式？我也尝试使用网格并添加虚线边框，但没有像我想的那样。

.brands-sec .brands{
justify-items: center;
width: 70%;
margin: auto;
display: grid;
grid-template-columns: auto auto auto auto auto auto ;
padding: 10px;
column-gap: 0px;
row-gap: 0px;
}

.brands-sec .brands img{
    border: 1px dotted #fff;
    padding: 40px;
}

This is the design I'm trying to make

Answer 1

您可以使用border-collapse: collapse虚线边框来达到效果。

const images = [  ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACoCAMAAABt9SM9AAAAA1BMVEX+AAAYIGMAAAAAR0lEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAO8GxYgAAb0jQ/cAAAAASUVORK5CYII=", 
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACoCAMAAABt9SM9AAAAA1BMVEUAlv+tY//LAAAAR0lEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAO8GxYgAAb0jQ/cAAAAASUVORK5CYII="], 
  ["https://wallpaperaccess.com/full/1288346.jpg", 
  "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUSEhMVFRUVFRcXFxcVGBgXFRcVFRUXFxcVFRcYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDQ0NDg0NDysZFRktLSsrKysrLTc3KzcrLSstLSsrNzctNzc3Ny0tNys3Ny0rLS03KzctNzc3LSstLS03Lf/AABEIAOEA4QMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAAAQIH/8QAJhABAQEAAAQFBAMAAAAAAAAAAAERAiFh8BIxQVHBobHR8XGBkf/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/EABYRAQEBAAAAAAAAAAAAAAAAAAARAf/aAAwDAQACEQMRAD8A4xUWswYW1FQADAWJSUoC2CWgGkQVQhRCotQUWJQFol5KChgICWqCYqwsA0hhAAAZUAEXUBFABQgJQAEUFABChxIKVYaCBBRVgiiCYlUFhQtAIYaC6JoCIqApq1AQKaApDQECgYSJgK0gtEShUFXFzkhoi1BYBKLEAA0BUAWgoJy7xVz+VBjWVKCoGghgUACAIpQRUUUioAUC0C0iaoAoIAUEpi4mAukiyACpFnfUDl7KxgAUxAUNUGSKgEhhpgLqUAII1ATWqyaBUa1BUUURFSLQBqM2gBpQFtSKBpI14WbQPFVTw98gCVMIlgCpFoIACKmLBSglAVNWAUJFETEqpAWAsAioQCwq1KCQFAxYmkoNaza1EoM6LnfdUEiWLCgiosoEqGoAqasAWxNWgkiyJiwFgJQNKyoGrEIiqsQVFSwpgBUUBUqwFiLYmUDRM6BQOI0AkVmLoJErTNgKQ0gLogAGgLAhQQACVeogNWVDVAQAEq4AjUTAFMWRATA5e8/wBBSggQBcRUBMa1MMBZCoUEWVK1KKRcSAhai4YCSkMXAXRCAst79wsQE0qgCxAFpUiwEDb1ARUAAAVKUBFCAJY0gIsMBVEURLVnpzzvpzSgEqxmNQDFiAGi1nAUpIUANICwlQBc6CAItEAVMXAKi4gIpSUFQ0BFRoDCqmAgACxJFwDVSRQQEwAUgEAwFkTdFBBrwzv9gM6hpoFAwFRalAtEigaULQTGozjUFDUgIigKpiRbRFEUBDV0GYoAtJTixICxKqAb3qpgCUtCAKEAqKUEtEqyAtiU0tBMaiasASqgGgABFAVFAiKgAAKkVMBdSqkgKADOCFBYBAWoqACYCgqALEaBIUKIYimCmqkBFppFoIGAFNAAFARZUwDev3ABEvygDUJ39ABq/n7s8XoAF+EnkANRADCr6gBxJQBanuALPwABPT+1ACpxACcPy1PKgKxFAFvkkARQBX/9k="]
]; 

for (const row of images){
  const _row = document.createElement("tr"); 
  for (const image of row){
    const _image = document.createElement("td"), __image = document.createElement("img"); 
    __image.src = image; 
    _image.appendChild(__image); 
    _row.appendChild(_image); 
  }
  document.getElementById("images").appendChild(_row); 
}

table, td, th {
  border: 1px dashed black;
  border-collapse: collapse; 
}

td{
  padding: 10px; 
}

table img{
  width: 100px; 
  height: 100px; 
}

<table id="images"></table>

Answer 2

这里有一些示例，您可以根据自己的代码试一试。让我知道

.brands-sec{
justify-content: center;
display: grid;
grid-template-columns: auto auto auto auto auto auto ;
padding: 10px;

}

.brands{
    border: 1px dotted #fff;
    padding: 10px;
    background-color: #555;
    
}


.brands img {
    height: 100px;
    width: 100px;}

<div class="brands-sec">

  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>
  <div class="brands"><img src="https://icon-library.com/images/small-icon-images/small-icon-images-11.jpg"></div>

</div>

Answer 3

或者您可以尝试使用 div 的“background-image”代替 img

.brand {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  border: dotted 1px gray;
  border-left-width: 0;
  border-top-width: 0;
  width: fit-content;
}

.brand .brand-image {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: dotted 1px gray;
  border-right-width: 0;
  border-bottom-width: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

<div class="brand">
  <div class="brand-image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div class="brand-image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div class="brand-image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div class="brand-image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div class="brand-image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
  <div class="brand-image" style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSEI22eAnqgcc4ZSrLSDtbDZT3enV6qsOA2agtaFCR7TjN_IrSuIvz8HBI0GtpEIV_2BA&usqp=CAU)"></div>
</div>

Answer 4

而不是像这样定位图片 .brands-sec .brands img { },

您可以定位和设置包含图像的容器的样式，例如，

    .brands-sec .brands { 
        border-style: dotted;
    }

或

    .image-container-example {
        border-style: dotted;
    }

Answer 5

只要你想让图片的边框很漂亮就很容易.img{border: 1px #000 dotted}。答案就这么简单

有没有办法在 css 中的图像之间添加虚线边框

Is there a way to add dotted borders between images in css

html

css