Question

我在创建图像的内部边框时遇到了一些问题。试图使用JFileChooser fileChooser = new JFileChooser(); fileChooser.setMultiSelectionEnabled(false); fileChooser.removeChoosableFileFilter(fileChooser.getAcceptAllFileFilter()); fileChooser.setFileFilter(new FileNameExtensionFilter("Files ending in .foo", "foo")); fileChooser.setFileFilter(new FileNameExtensionFilter("Files ending in .bar", "bar")); int option = fileChooser.showSaveDialog(null); if (option == JFileChooser.APPROVE_OPTION) { File file = fileChooser.getSelectedFile(); if (file!=null) { FileFilter fileFilter = fileChooser.getFileFilter(); if (fileFilter instanceof FileNameExtensionFilter && ! fileFilter.accept(file)) { // if the filter doesn't accept the filename, that must be because it doesn't have the correct extension // so change the extension to the first extension offered by the filter. FileNameExtensionFilter fileNameExtensionFilter = (FileNameExtensionFilter) fileFilter; String extension = fileNameExtensionFilter.getExtensions()[0]; String newName = file.getName() + "." + extension; file = new File(file.getParent(), newName); } System.out.println("The selected file is: " + file.getAbsolutePath()); } }，border和outline进行此操作，但未获得结果。

HTML：

box-shadow

CSS：

<div class="item">
  <img src="https://i.ytimg.com/vi/vsZDSXlHqI4/maxresdefault.jpg" alt="">
  <h3>Title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo blanditiis, distinctio. Odio eveniet vel nobis, consequuntur atque, dolorum debitis quae nesciunt esse quasi beatae, odit repudiandae dolore animi delectus ad nostrum, quas maiores hic labore?
    Nisi, expedita sint, qui ullam itaque natus optio error accusantium placeat, culpa reiciendis, quos tempora.</p>
  <button>Some action</button>
</div>

我的小提琴：JSFiddle

这里我有外边框，但我想进入图像的边框。

感谢您的帮助。

Answer 1

将img换成div，然后hover使用:after伪元素：

＆＃13;

div.item {
  min-height: 300px;
  overflow: auto;
  width: 300px;
  background-color: white;
  border: 2px solid #8cc34b;
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
div.item img {
  width: 100%;
  display: block;
}
div.item p {
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
}
div.item button {
  height: 35px;
  width: 120px;
  margin: 0 auto;
  margin-bottom: 20px;
}
div.item .img-container {
  position: relative;
}

div.item:hover h3 {
  color: #8cc34b;
}
div.item:hover .img-container:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 100%;
  background-color: #8cc34b;
}

＆＃13;

<div class="item">
  <div class="img-container">
    <img src="https://i.ytimg.com/vi/vsZDSXlHqI4/maxresdefault.jpg" alt="">
  </div>
  <h3>Title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo blanditiis, distinctio. Odio eveniet vel nobis, consequuntur atque, dolorum debitis quae nesciunt esse quasi beatae, odit repudiandae dolore animi delectus ad nostrum, quas maiores hic labore?
    Nisi, expedita sint, qui ullam itaque natus optio error accusantium placeat, culpa reiciendis, quos tempora.</p>
  <button>Some action</button>
</div>

＆＃13;

我还在display: block添加了img，因为内联img会在下方创建额外的空格。

Answer 2

我们可以使用outline-offset属性执行此操作：

outline: 1px solid #fff;
outline-offset: -10px;

如果适用于你，请在你想要的div中试试。

Answer 3

另一个答案：

要像你喜欢的图像一样创建一个颜色条，我将你的图像包装在一个带有x类的DIV中，并添加了下面的CSS（包括一个伪元素）：

  img {
    width: 100%;
  }
  .x {
    display: block;
    position: relative;
  }
 .x:before {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 7px;
    left: 0;
    right: 0;
    height: 5px;
    background-color: #8cc34b;
  }

而不是图像的悬停规则，我只是通过更改其z-index使x DIV可见：

div.item:hover {
  h3 {
    color: #8cc34b;
  }
  .x:before {
    z-index: 1;
  }
}

根据需要调整bottom设置以向上或向下移动：

https://jsfiddle.net/9wLx9p0f/5/

Answer 4

你是说填充物吗？如果是，您可以使用此CSS：

img {
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
  }

请注意，您必须使用box-sizing: border-box;，因此从100％宽度中减去填充。

https://jsfiddle.net/9wLx9p0f/1/

或者你的意思是这样的：

https://jsfiddle.net/9wLx9p0f/2/

这使用常规边框设置，但又取决于box-sizing: border-box;的使用，因此边框是100％宽度的一部分。

图像的内部边界

4 个答案: