边框不应与图像边对边

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

您可以向图像添加填充，并使用带有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 2

另一种方法是使用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>

Answer 3

以您的情况为“ get”的图像类名称为目标，并添加一些填充