内容区 (Content Area):这是元素的主要内容区域,例如文本、图像等所在的地方。 内边距 (Padding Area):padding属性定义的区域,位于内容区和边框之间。 边框(Border Area):如果边框存在且不是透明的,background-color会填充到边框的内边缘。 注意,边框的颜色由border-color属性控制,而不是background-color。 不包括...
padding: 30px; border: 5px dashed red; margin: 20px; /* background-color: slateblue; 背景颜色 */ background-image: url(images/lagouwang.jpg); } 如果图片不重复,从 border 以内开始加载 背景图和背景颜色可以同时设置,背景图会压盖背景颜色,没有背景图的区域会显示背 景颜色 三、背景重复 backgr...
background-origin: content-box; 仅在内容区显示背景。 background-clip:指定背景的裁剪区域。 值:border-box | padding-box | content-box 默认是:border-box 【看栗子】 .box8{padding: 25px; border: 10px dotted #000; background-color: yellow;} border-box 背景会延伸到外边界的边框,但边框在上,背...
①当对行内元素使用padding时,只有左右方向(正常)有效;竖直方向上,内边距对于该行内元素有效果,但是对其他元素无任何影响。 ②当对行内元素使用margin时,只有左右方向有效,竖直方向无任何效果。 ③background-color的范围:这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。 如果...
color:#113366 可以简写为 1 color:#136 所有用到16进制色彩值的地方都可以使用简写,比如background-color、border-color、text-shadow、box-shadow等。 盒子(margin/padding) 这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同。盒子有上下左右四个方向,每个方向都有个外边距: ...
padding对于background-image和background-color都会起作用，都会把本身的大小给撑开。margin对于background-image和background-color本身不起作用，只是针对相邻的div有间距。如果你想要文字垂直居中，你可以设置行高line-height，行高和btn的高度一致，就可以垂直居中了 ...
1. background-color背景颜色 可以简写 background;默认值是transparent。(透明) 不能继承 2. background-image背景图片 可以简写background url(“图像的url路径地址”)图像的URL; none表示背景上没有设置任何图像,这是默认值; inherit指定背景图像应该从父元素继承 ...
取值:padding-box:从padding区域(不含padding)开始向外裁剪背景。 border-box:从border区域(不含border)开始向外裁剪背景。 content-box:从content 区域开始向外裁剪背景。 二、颜色:color:设置对象的文本颜色。 可使用颜色名,rgb,hex,rgba,hsl,hsla,transparent等等来设置。
从3D视角看盒模型可以发现多了两个属性:background-image和background-color,而这两个属性都可以归纳到元素的background中,同时在元素的background中还有6个属性[1]可以影响到background-image和background-color的绘制情况,这篇博文主要是用来介绍background-image和background-color还有其余6个属性以及它们是怎样影响到...
一丶background-color属性 给一个元素设置了background-color属性,它会从盒子模型的padding左上角开始绘制到padding右下角。border颜色需要单独设置 不设置默认为黑色 此时介绍一个属性background-clip,它有三个取值,border-box,padding-box和content-box,它们分别规定了背景颜色的绘制起从border,padding,content左上角开...