边框不应与图像边对边

Question

我正在尝试使用 CSS 存档作为附加的屏幕截图。有什么方法可以使用 border属性或任何其他与所附屏幕截图相同的存档方式吗？左上角和右下角的边框不应与图像边对边。边框 (#095B6F) 不应与图像对齐。

<style>
  .bordered {
    width: 50%; }

  .bordered .get { 
    border-color: #095B6F;
    border-style: solid;  
    border-width: 20px 20px 0px 0px; }
</style>

<div class="bordered">
   <img src="https://assets.imgix.net/hp/snowshoe.jpg?auto=compress&w=400&h=400" class="get">
</div>

Answer 1

定位图像 class 名称，在您的例子中是 "get"，并添加一些填充

Answer 2

您可以为图像添加填充，并使用背景 linear-gradient:

创建伪边框

.bordered {
  background: linear-gradient(#095B6F, #095B6F) top right/90% 90% no-repeat;
  padding: 20px 20px 0px 0px;
}

<img src="https://assets.imgix.net/hp/snowshoe.jpg?auto=compress&w=400&h=400" class="bordered">

如果图片是透明的，渐变会出现在图片后面。在这种情况下，您可以使用两个渐变：

.bordered {
  background: 
    linear-gradient(#095B6F, #095B6F) top right/90% 20px,
    linear-gradient(#095B6F, #095B6F) top right/20px 90%;
  background-repeat: no-repeat;
  padding: 20px 20px 0px 0px;
}

body {
  background: silver;
}

<img src="https://fakeimg.pl/400x400/ff0000,0/333333,255/?text=Sample&font=lobster" class="bordered">

Answer 3

另一种方法是使用 css box-shadow 属性:

.bordered {
  width: 50%; }

.bordered .get { 
  margin: 20px 20px 0 0;
  box-shadow: 20px -20px #095B6F;
}

<div class="bordered">
   <img src="https://assets.imgix.net/hp/snowshoe.jpg?auto=compress&w=400&h=400" class="get">
</div>

边框不应与图像边对边

Border should not edge-to-edge with image

html

css

border