CSS-圖片邊框

概念

分為兩層div空間

• 先定義下方piece空間的邊框角度
• 再定義上方piece-photo空間的邊框角度
• 最後定義上方piece-photo的背景，用background-imgage屬性引入圖片
  

實作

外層：定義外層div空間的寬高、原角邊框等樣式設定
內層：

1. 先定義「內層空間的寬高」、原角邊框
2. background-image引入圖片之後，要定義「被引入圖片的寬高」、定位等設定

補充：更多圖片屬性設定參考 html&CSS-插入(背景)圖片的作法-從css選擇器中定義背景

<div class="piece">
    <div class="piece-photo"></div>
</div>

.piece{
    width: 300px;
    background-color:white;
    border-radius: 0.25rem;  
}
.piece-photo{
    background-size: 300px;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem; 
    
    background-image: url("../img/meal1.jpg");
    background-position: 50% 50%;
    background-attachment: scroll;
    width: 300px;
    height: 200px;
}

成果

My Project-Profile-Education page