CSS 能否在保持可見邊框的同時創建角落和剪輯圖像？

CSS 角角創建和圖像剪切

是否可以利用 CSS 創建特定的形狀，從而產生 45 度角？此外，要求包括在形狀內剪切圖像，類似於使用灰色邊框保持可見的蒙版。

嚴格在 CSS 中探索此任務的可行性，很明顯，維護邊框會帶來挑戰。儘管如此，我們還是設計了一個解決方案，將 :before 和 :after 偽元素與父容器結合使用。由於 :before 和 :after 無法直接套用於 img 標籤，因此採用下列方法：

1. 為容器元素建立邊框。
2. 建立 :before 元素遮蔽一個角落並將其位置偏移 -1px 以隱藏邊框。
3. 加入一個 :after 元素，與:before 元素以在剖面內產生線條。

雖然這種方法接近預期效果，但它遇到了 45 度角線的粗細問題。這是 CSS 程式碼片段：

.cutCorner {
  position: relative;
  background-color: blue;
  border: 1px solid silver;
  display: inline-block;
}

.cutCorner img {
  display: block;
}

.cutCorner:before {
  position: absolute;
  left: -1px;
  top: -1px;
  content: "";
  border-top: 70px solid silver;
  border-right: 70px solid transparent;
}

.cutCorner:after {
  position: absolute;
  left: -2px;
  top: -2px;
  content: "";
  border-top: 70px solid white;
  border-right: 70px solid transparent;
}

這是一個 HTML 範例：

<div class="cutCorner">
  <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

以上是CSS 能否在保持可見邊框的同時創建角落和剪輯圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！