小編典典

您可以使用box-shadow，可能是：

#something {

background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;

min-width: 300px;

min-height: 300px;

box-shadow: inset 0 0 10px #0f0;

}

#something {

background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;

min-width: 300px;

min-height: 300px;

box-shadow: inset 0 0 10px #0f0;

}

這樣的好處是它將覆蓋的背景圖像div，但是當然會模糊(正如您希望從box-

shadow屬性中看到的那樣)。要建立density陰影的陰影，您當然可以添加其他陰影：

#something {

background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;

min-width: 300px;

min-height: 300px;

box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;

}

#something {

background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;

min-width: 300px;

min-height: 300px;

box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;

}

編輯 因為我意識到，我是個白癡，忘了提供簡單的解決方案 首先 ，它是使用，否則空的子元素應用在背景的邊界：

#something {

background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;

min-width: 300px;

min-height: 300px;

padding: 0;

position: relative;

}

#something div {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

border: 10px solid rgba(0, 255, 0, 0.6);

}

jsfiddle.net/dPcDu/2中，您可以為其添加第4個px參數，以box-shadow進行傳播并更輕松地反映其圖像。

#something {

background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;

min-width: 300px;

min-height: 300px;

box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);

}

2020-05-16

總結

以上是生活随笔為你收集整理的css 科技 边框_CSS内嵌边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。