Web基础05 盒子模型01边框属性

首先要知道盒子模型用的标签是


必备的是实体化三属性 width height background(背景属性)
边框属性
①边框样式(border-style)
border-style:上边[左边 下边 右边];
样式:double 双实线 dashed 虚线 solid 单实线 dotted 点线
②边框宽度(border-width)
border-width:上边[左边 下边 右边];
单位px
要先有样式 才可以有宽度
③边框颜色(border-color)
border-color:上边[左边 下边 右边];
border-top/right/bottom/left-color;
④综合设置边框
border:样式 宽度 颜色;
不分先后,省略的用默认值
border-top/right/bottom/left:样式 宽度 颜色;单侧边综合属性
⑤圆角边框(border-radius)
border-radius:水平1 水平2 水平3 水平4/垂直1 垂直2 垂直3 垂直4;
参数取值单位:px或%
⑥图片边框(border-image)
border-image:border-image-source/border-image-slice/border-image-width/border-image-outset/border-image-repeat;
border-image-source 指定图片路径
border-image-slice 指定边框图像顶、右、底、左的偏移量
border-image-width指定边框宽度
border-image-outset 指定边框背景的盒子外部延伸距离
border-image-repeat 指定背景图片的平铺方式
border-image-repeat:stretch 拉伸填充

你可能感兴趣的