码迷,mamicode.com
首页 > 其他好文 > 详细

background-clip:content-box; 盒子内除去padding部分,显示背景。

时间:2016-09-12 00:28:02      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:

 //CSS样式表
.a
{
    width:150px;
    height:30px;
    padding:15px 0px;
    border-top:30px solid blue;//上边框
    border-bottom:30px solid red;//下边框
    background-color:#666666;
    background-clip:content-box;//div内除去padding部分,显示背景
    border-left:1px #000000 solid;
    border-right:1px #000000 solid;}

//body 内
<div class="a"></div>

技术分享

   

 

还有一个例子:同心圆

//CSS
.a
{
    border:10px #000000 solid;
    border-radius:50%;
    width:100px;
    height:100px;
    padding:10px;
    background-color:#000000;
    background-clip:content-box;//万万不能少的
}

//body
<div class="a"></div>

技术分享

 

background-clip:content-box; 盒子内除去padding部分,显示背景。

标签:

原文地址:http://www.cnblogs.com/wwz-wwz/p/5863097.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!