如何製作此邊框

Question

有人可以幫我做這個代碼嗎？我想將其作爲網頁中的方形邊框。這就像邊界內的邊界。

Answer 1

如果我對你的問題的理解是正確的，你可以採用插入式box-shadow像下面摘錄做到這一點。一個陰影（紅色的）具有模糊半徑，因爲它似乎從紅色變爲透明，而另一個陰影不具有模糊半徑，因爲它似乎始終是一條實線。

.fancy-border { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 10px solid rgb(0, 53, 107); 
 
    padding: 20px; 
 
    box-shadow: inset 0px 0px 10px 10px rgb(252, 1, 2), inset 0px 0px 0px 20px rgb(0, 53, 107); 
 
}

<div class='fancy-border'>Some content</div>

---

如果你只想外藍色的邊框和內部的紅色邊框（無內多餘的藍色邊框），那麼它可以做如下圖所示：

如果我對你的問題的理解是正確的，你可以使用插入box-shadow，如下面的代碼片段。一個陰影（紅色的）具有模糊半徑，因爲它似乎從紅色變爲透明，而另一個陰影不具有模糊半徑，因爲它似乎始終是一條實線。

.fancy-border { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 10px solid rgb(0, 53, 107); 
 
    padding: 20px; 
 
    box-shadow: inset 0px 0px 10px 10px rgb(252, 1, 2); 
 
    background: rgb(0, 53, 107); /* remove if this also is not needed */ 
 
}

<div class='fancy-border'>Some content</div>