1.border-width
取值是常规CSS长度,可以使用em,px,cm,百分数,thin,medium,thick
2.border-style
none 没边框
dashed 破折线边框
double 双线式边框
dotted 圆点线式边框
groove 槽线式边框
inset 使元素内容具有内嵌式效果的边框
outset 使元素内容具有外凸式效果的边框
ridge 脊线边框
solid 实线边框
3.border-radius
圆角边框
4.将图像用作边框 border-image
border-image-source 设置图像URL
border-image-slice 设置切分图像的偏移
border-image-width 设置图像的宽度
border-image-outset 指定边框图像向外扩展的部分
border-image-repeat 设置图像填充边框区域的模式
border-image
p{
border-image:url() 30 / 50px;
}
控制切分图重复的方式 border-image-repeat样式 strtch(拉伸切分图充满整个空间,默认) repeat(平铺切分图填满整个空间)
round(在不截断切分图的情况下,平铺切分图填满整个空间) space(在不截断切分图的情况下,平铺切分图并在图片之间保留一定的间距以填满整个空间)
5.背景
background-repeat 设置重复方式 repeat,repeat-x, repeat-y(水平/垂直平铺,可能被截断),space,round,no-repeat
background-size 设置尺寸 contain(等比例缩放,使其高或宽较大者与容器重合,背景始终在容器内) cover(等比例缩放,图像至少覆盖,有可能超出容器) auto(默认值,图像本身大小)
background-position 设置背景图像位置 top,left,right,bottom,center
background-attachment 设置元素中的图像是否固定或随页面一起滚动 fixed(背景固定到视窗上,内容滚动背景不dong) local(背景附着到内容上,背景随内容滚动) scroll(背景固定到元素上,不随内容滚动)
background-clip 设置背景图像的裁剪方式 (同下)
background-origin 设置背景图像绘制的起始位置 border-box(在边框盒子内部绘制背景颜色和图像) padding-box(在内边距盒子内部) centent-box (在内容盒子内部绘制)
简写 background:<background-color><background-position><background-size><background-repeat><background-origin><background-clip><background-attachment><background-image>
6.创建盒子阴影
box-shadow:hoffset voffset blur spread color inset
hoffset 阴影的水平偏移
voffset 阴影的垂直偏移
blur 指定模糊值
spread 指定阴影的延伸半径
color 设置阴影的颜色
inset 将阴影设置为内部阴影
box-shadow:5px 4px 10px 2px gray inset;
7.创建轮廓
outline-color 设置外围轮廓颜色
outline-style 设置轮廓距离元素边框边缘的偏移量
outline-windth 设置轮廓样式
outline 简写<颜色><样式><宽度> outline:thick solid red
取值是常规CSS长度,可以使用em,px,cm,百分数,thin,medium,thick
2.border-style
none 没边框
dashed 破折线边框
double 双线式边框
dotted 圆点线式边框
groove 槽线式边框
inset 使元素内容具有内嵌式效果的边框
outset 使元素内容具有外凸式效果的边框
ridge 脊线边框
solid 实线边框
3.border-radius
圆角边框
4.将图像用作边框 border-image
border-image-source 设置图像URL
border-image-slice 设置切分图像的偏移
border-image-width 设置图像的宽度
border-image-outset 指定边框图像向外扩展的部分
border-image-repeat 设置图像填充边框区域的模式
border-image
p{
border-image:url() 30 / 50px;
}
控制切分图重复的方式 border-image-repeat样式 strtch(拉伸切分图充满整个空间,默认) repeat(平铺切分图填满整个空间)
round(在不截断切分图的情况下,平铺切分图填满整个空间) space(在不截断切分图的情况下,平铺切分图并在图片之间保留一定的间距以填满整个空间)
5.背景
background-repeat 设置重复方式 repeat,repeat-x, repeat-y(水平/垂直平铺,可能被截断),space,round,no-repeat
background-size 设置尺寸 contain(等比例缩放,使其高或宽较大者与容器重合,背景始终在容器内) cover(等比例缩放,图像至少覆盖,有可能超出容器) auto(默认值,图像本身大小)
background-position 设置背景图像位置 top,left,right,bottom,center
background-attachment 设置元素中的图像是否固定或随页面一起滚动 fixed(背景固定到视窗上,内容滚动背景不dong) local(背景附着到内容上,背景随内容滚动) scroll(背景固定到元素上,不随内容滚动)
background-clip 设置背景图像的裁剪方式 (同下)
background-origin 设置背景图像绘制的起始位置 border-box(在边框盒子内部绘制背景颜色和图像) padding-box(在内边距盒子内部) centent-box (在内容盒子内部绘制)
简写 background:<background-color><background-position><background-size><background-repeat><background-origin><background-clip><background-attachment><background-image>
6.创建盒子阴影
box-shadow:hoffset voffset blur spread color inset
hoffset 阴影的水平偏移
voffset 阴影的垂直偏移
blur 指定模糊值
spread 指定阴影的延伸半径
color 设置阴影的颜色
inset 将阴影设置为内部阴影
box-shadow:5px 4px 10px 2px gray inset;
7.创建轮廓
outline-color 设置外围轮廓颜色
outline-style 设置轮廓距离元素边框边缘的偏移量
outline-windth 设置轮廓样式
outline 简写<颜色><样式><宽度> outline:thick solid red