Captain9911

CSS盒子边框

  • Oct 18, 2022

关键词：css, 盒子边框, border

盒子边框

/* 边框宽度 */
border-width: 8px;
/* 边框颜色 */
border-color: red;

/* 边框风格 */
border-style:
none：无边框，并忽略所有边框的宽度，默认值
solid：单实线，最常用
dashed：虚线
dotted：点线
double：双实线

单独设置一侧的边框

border-top-color: blue;

简写方式

/* 简写方式：宽度 样式 颜色 */
border: 8px solid green;

合并相邻边框

border-collapse: collapse;

圆角

/* 四个角相同 */
border-radius: 10px;

/* 左上右下，右上左下 */
border-radius: 10px 20px;

/* 左上，右上左下，右下 */
border-radius: 10px 20px 40px;

/* 左上，右上，右下，左下 */
border-radius: 10px 20px 40px 80px;

/* 当弧度为边长的一半时，为圆形 */
border-radius: 50%;
Search