前端开发学习笔记–CSS 边框

发布于 2018-04-18  93 次阅读


可以通过 css 设置边框的样式,长度和颜色

border-style 声明边框,border-width 设置边框长度,border-color 设置边框颜色

例:

p {
   border-style: solid;
   border-width: 1px;
   border-color: green;
}
//设置四条边框样式都一致

简写形式:

p {
   border: 1px solid green;
}
//值的顺序:<宽度> <样式> <颜色>

若需单独设置某一条边的样式如上边框的样式可使用以下方式:

p {
   border-top-style: solid;
   border-top-width: 1px;
   border-top-color: green;
}
//单独设置上边框样式

如需设置下边框,左右边框可使用代码 border-bottom/border-left/border-right

border-style 即边框线条样式,常用线条样式有:solid(实线边框);none(没有边框);groove(槽线边框);double(双线边框);inset(使元素内容具有内嵌效果的边框);outset(使元素内容具有外凸效果的边框);dotted(圆点线边框);dashed(破折线边框);ridge(脊线边框);

使用 border-radius 属性可以设置圆角边框,其值是长度值或百分数

例:

p {
   border: 1px solid green;
   border-radius: 1px 2px 3px 4px;
}
//即圆角矩形边框的左上边角为 1px,右上边角为 2px,左下边角为 3px,右下边角为 4px

如需单独设置右下边角可使用 border-bottom-right-radius,如:

p {
   border: 1px solid green;
   border-bottom-right-radius:4px;
}

//设置左上边角使用 border-top-left-radius,右上边角使用 border-top-right-radius,左下边角使用 border-bottom-left-radius,右下边角使用 border-bottom-right-radius