css3 - css背景色不填充边框,css怎么写?
天蓬老师
天蓬老师 2017-04-17 11:42:35
0
7
1709

如题:
css背景色不填充边框,css有实现这样功能的属性吗?怎么写?

例如定义一个p样式:

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

背景色只填充100px,100px部分,不填充边框10px部分,怎么写css???

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

reply all(7)
洪涛

background-clip: padding-box;That’s it
Support: IE9+

background-clip的值
padding-box: 从padding区域(不含padding)开始向外裁剪背景。 
border-box: 从border区域(不含border)开始向外裁剪背景。 
content-box: 从content区域开始向外裁剪背景
小葫芦

Use outline instead of border:

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

黄舟

Can you just set the border color to be the same as the background color?

阿神

The background color area set by background-color includes border and padding, so if the set border is dotted or has transparency, you can see the set background color through the border
Set the outline style mentioned by @He Xiansen, You can set an outer border style outside the border of the target element, with the starting position being the border of the target element. This style does not affect the current layout of the target element, which can cause some problems, such as

<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> 

We will see that outline will occupy the position of other elements

To solve this problem, we can solve it by setting 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);*/
    }

阿神

Strange, why does the background color fill in the border color? I didn't understand it when I was reviewing the question.

小葫芦

Don’t you know the padding for the background color? ?

黄舟

What a strange question, and the answer is also confusing

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template