問題描述

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

例如定義一個(gè)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區(qū)域（不含padding）開始向外裁剪背景。 border-box： 從border區(qū)域（不含border）開始向外裁剪背景。 content-box： 從content區(qū)域開始向外裁剪背景回答2：

使用outline代替border:

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

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

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

<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將會(huì)占據(jù)其它元素的位置

要解決這個(gè)問題，我們可以通過設(shè)置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);*/ }

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

背景色不是知道padding嗎？？

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