| CSS学习11：边框（border） | 您所在的位置：网站首页 › css盒子实线 › CSS学习11：边框（border） |
CSS学习11：边框（border）
|
目录 border语法： border-style的属性值如下： border可以单独设置四周的边框 边框会影响实际盒子的大小 border语法：border : border-width || border-style || border-color; 例如： border: 1px solid red; 属性作用border-width自定义边框的粗细，单位是pxborder-style边框的样式border-color边框颜色 Document div { width: 200px; height: 200px; background-color: pink; /* 边框会撑大盒子 */ border: 5px solid #000; } border-style的属性值如下： none：没有边框 solid：边框为单实线（常用） dashed：边框为虚线 dotted：边框为点线 border可以单独设置四周的边框border-top 设置上边框 border-bottom 设置下边框 border-left 设置左边框 border-right 设置右边框 Document div { width: 200px; height: 200px; /* 边框是由上下左右四部分组成 这个比较常用 */ border-top: 1px solid #000; border-right: 5px dotted #ccc; border-bottom: 10px dashed red; border-left: 5px solid green; }
边框会影响实际盒子的大小 盒子模型的宽高会把边框的大小算进去，从而影响布局。解决方法： 测量盒子大小的时候不量边框的大小，直接量内容的宽高。如果测量的时候包含了边框，则需要把宽高里边框的那一份减去。 |
【本文地址】
公司简介
联系我们