<style>
.hotline24{ width:130pxheight:25pxborder-radius: 5pxbackground:greenline-height:25pxtext-align:centercolor:#00FF004}
</style>
最后一个color:#00FF004就是绿色。
博客园首页联系管理Css之background-clip
------------恢复内容开始------------
解释:margin区域就是图中最外层,border则是图中第二层区域,以此类推(图画的抽象,凭空想象一下)。
先来认识一下background-clip属性,background是背景,clip是修剪,整体意思就是修剪背景。
说到背景,我们就先来认识一下Css中的背景。
连着上面的图看,代码background-color:green将会直接把上图中border边框以内的区域全部变为绿色。但如果我们想要让padding以内的区域变成绿色或者是让content以内的区域变成绿色,那么此时clip属性就可以派上用场了。
clip有三个属性值:background-clip:border-box(默认)、padding-box、content-box
使用这三个值就可以截取border、padding、content以内的区域,对其进行我们所需要的操作。
下面来看例子:
复制代码
1 .box {
2 border: 20px dashed black
3 background-color: green
4 padding:20px;
5 background-clip: border-box/padding-box/content-box /*****注意看这里****/
6 }
7 <body>
8 <div class="box">
9 </div>
10 </body>
复制代码
显示如下:
如图中显示,clip会根据border、padding、content所在的区域,进行裁剪。
此外,再补充一个background-image属性:image是图片,下面我们来看看它在Css中是如何显示的:
复制代码
1 <style>
2 .box {
3 width: 468px
4 height: 262px
5 padding: 20px
6 border: 20px dashed black
7