css3 - css背景色不填充邊框，css怎么寫？

問題描述

如題：css背景色不填充邊框，css有實現這樣功能的屬性嗎？怎么寫？

例如定義一個p樣式：

width: 100px; height: 100px; background-color: #131212; border: solid 10px rgba(249, 249, 249, 0.2);

背景色只填充100px,100px部分，不填充邊框10px部分，怎么寫css???

問題解答

background-clip: padding-box;即可支持度：IE9+

background-clip的值padding-box： 從padding區域（不含padding）開始向外裁剪背景。 border-box： 從border區域（不含border）開始向外裁剪背景。 content-box： 從content區域開始向外裁剪背景回答2：

使用outline代替border:

outline: 10px solid RGBA(0, 0, 0, 0.03);background-color: #A5DC86;

你把邊框的顏色和背景色設置一樣不就行了

background-color設置的背景色區域包括border和padding，所以如果設置的border是dotted或有透明度的那么通過border就可以看到設置的背景色設置 @賀先森 提到的outline樣式，可以在目標元素的border之外設置一個外邊框樣式，開始位置為目標元素的邊框。這個樣式不會影響目標元素的當前布局，這會引起一些問題，例如

<style> .p_outline{ width: 100px; height: 100px; background-color: #ffe48d; outline:dotted 10px red; /*border: solid 10px rgba(249, 249, 249, 0.2);*/}.p_border{ width: 100px; height: 100px; background-color: #00a23f; border: dotted 10px rgba(249, 249, 249, 0.2);}</style><p class='p_outline'></p> <p class='p_outline'></p>

我們將看到outline將會占據其它元素的位置

要解決這個問題，我們可以通過設置margin方式解決:

.p_outline{width: 100px;height: 100px;margin: 10px 10px 10px 10px;background-color: #ffe48d;outline:dotted 10px red;/*border: solid 10px rgba(249, 249, 249, 0.2);*/ }

奇怪，背景色為什么會填充border的顏色？審題的時候沒看懂。

背景色不是知道padding嗎？？

這是一個怎樣奇怪的問題，答案也是一頭霧水