元素的边框就是围绕元素内容和内边距的一条或多条线。
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
常用单位为像素(px)、em
thin细的边框。/medium 默认/thick 定义粗的边框。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
none 定义无边框。
dotted 定义点状边框
dashed 定义虚线
solid 定义实线。
double 定义双线
groove 定义 3D 凹槽边框。
ridge 定义 3D 垄状边框。
inset 定义 3D inset 边框
outset 定义 3D outset 边框。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
border-radius 设置所有四个 border-radius 属性的简写属性。
* 同时设定四个角的圆角
** 分别设定左上 右下、左下 右上圆角
*** 分别设定左上 、左下 右上、右下圆角
**** 分别设定左上 、右上、右下、左下圆角
border-top-left-radius 左上角圆角边框
border-top-right-radius 右上角圆角边框
border-bottom-right-radius 右下角圆角边框
border-bottom-left-radius 左下角圆角边框
border-image 设置所有 border-image属性的简写属性。
border-image 复合属性，设置边框使用图像来填充，可依次设置一下属性：
border-image-source 图像来源路径
border-image-slice 边框背景图的分割方式
border-image-width 边框的宽度。
border-image-outset 边框背景图的扩展(边框图像区域超出边框的量。)
border-image-repeat 边框图像的平铺方式:stretch拉伸/repeat重复铺满/round重复铺满并对图片进行调整
box-shadow 向方框添加一个或多个阴影。
none： 无阴影
div{
width: 500px;
height: 300px;
background: rgb(122,60,30);
border:2px solid green;
border-width: 8px;
border-style:dotted solid;
border-color:blue red;
border-bottom:5px solid black;
}
#div1{
border-radius: 3em;
}
#div2{
border-radius: 3em 1em;
}
#div3{
border-top-left-radius:2em;
}
#div4{
border-top-left-radius:2em 4em;
}
#div5{
border-radius: 3em 2em/1em 4em;
}
#div1{
border-image-source: url(../img/bj.jpg);
border-image-slice:30;
border-image-width:30px;
border-image-outset:10px;
border-image-repeat:stretch;
}
联系客服
