接下来的文章中列举一些CSS中内容区之外盒子模型常用属性。
- 在CSS中,可以使用颜色名称/RGB 值/十六进制值/色相、饱和度和明度来指定颜色,部分色卡如图。
-
背景
background-color:
设置背景颜色,默认是透明的。属性值为上述所说的三种颜色值,或是linear-gradient函数来设置渐变背景。background-image
:设置背景图片操作。属性值为图片路径。background-repeat
:设置背景平铺方式操作,属性值有4种,分别为repeat
平铺 (默认),no-repeat
不平铺,repeat-x
水平平铺,repeat-y
垂直平铺。background-position
:设置背景的位置操作,有3种书写风格:方位名词:top,left,right,bottom;精确单位:坐标或者百分比;混合单位:同时包含方位名词和精确单位。background-size
:设置背景尺寸操作。值可以为具体像素、百分比、cover(扩展图片来填满元素)、contain(缩小图片来适应元素的尺寸)。background-attachment
:设置背景图片是随对象内容滚动还是固定的。值可以为scroll(指定背景图片会随元素里内容的滚动而滚动,这是默认值),fixed(背景图片固定,不会随元素里内容的滚动而滚动)。background-clip
:设置背景覆盖的范围。background-origin
:设置背景覆盖的起点。
-
边框
-
border-width:
设置边框粗细。值为具体像素值,如果四个参数则顺序为上、右、下、左,如果三个参数则顺序为上、左右、下,两个参数则顺序为上下、左右,如果一个参数则为设置四个方向的边框。 -
border-style
:设置边框样式,默认情况是无边框的。属性值可以为none:无边框;
hidden:隐藏边框;dotted:点线边框;dashed:虚线边框;solid:实线边框;double:双线边框;groove:3D凹槽边框;ridge: 3D凸槽边框;inset:3D凹入边框;outset:3D凸出边框。 border-color:
设置边框颜色。属性值同背景颜色。border
属性是以上各个边框属性的简写属性。border-radius:
可使边框带圆角效果。属性值为具体像素值,即内切圆的半径。可以分为以下四种属性:- border-top-left-radius:该属性用于指定左上角的圆角半径。
- border-top-right-radius:该属性用于指定右上角的圆角半径。
- border-bottom-right-radius:该属性用于指定右下角的圆角半径。
- border-bottom-left-radius:该属性用于指定左下角的圆角半径。
-
-
内边距
padding:
设置内容和边框之间的距离。属性值为具体像素值,顺序同边框粗细。padding-top
:设置上边的内填充距离。padding-right
:设置右边的内填充距离。padding-bottom
:设置下边的内填充距离。padding-left
:设置左边的内填充距离。
-
外边距
marign
:设置盒子与盒子之间的距离。属性值为具体像素值,顺序同边框粗细。marign-top
:设置上边的外边距距离。marign-right
:设置右边的外边距距离。marign-bottom
:设置下边的外边距距离。marign-left
:设置左边的外边距距离。