网站导航还值得做,山东线上推广软件,我的世界皮肤网站做,铁路建设工程网站盒子模型的重要组成部分 内容区域content#xff1a;width , height 内边距#xff1a;内边框和内容区域的距离Padding边框线#xff1a;Border外边距#xff1a;Margin Border (边框线) 属性#xff1a;Border 属性值#xff1a;边框线粗细px 线条样式 颜色(不区分…盒子模型的重要组成部分 内容区域contentwidth , height 内边距内边框和内容区域的距离Padding边框线Border外边距Margin Border (边框线) 属性Border 属性值边框线粗细px 线条样式 颜色(不区分先后顺序中间用空格隔开) 线条样式的属性值 solid 实线 dashed 虚线 dotted 点线 div{border:red 5px solid;} Border-radius (圆角) 作用设置元素的外边框为圆角 属性border-radius 属性值数字px 或 百分比 属性值是圆角半径 设置圆的半径为15px div{width:100px;height: 100px;background-color: red;border-radius: 15px;}
可以看到盒子的边框已经发生改变 正圆-盒子 将半径设置为盒子的宽高一半宽高相等 div{width:100px;height: 100px;background-color: red;border-radius: 50px;} 胶囊-盒子 将圆的半径设置为盒子的高度一半 div{width:200px;height: 100px;background-color: red;border-radius: 50px;} 同时给四个角赋值 div{width:100px;height: 100px;background-color: red;border-radius: 15px 25px 15px 30px;}
每个角的像素都不同 Padding (内边距) 作用设置内容与盒子边缘之间的距离 属性paddding 属性值:数字px div{padding:50px;background-color: red;} Margin (边缘距离) 作用拉开两个盒子之间的距离 属性Margin 属性值数字px div{width:400px;height: 400px;margin: 50px;padding:50px;background-color: red;}
可以清楚的看到边缘距离是50 设置单方向线 属性盒子属性-方向名词(例如设置左边框border-left) 左边left 右边right顶部top底部bottom 属性值边框线粗细px 线条样式 颜色(不区分先后顺序中间用空格隔开) div{border-left:red 5px solid;} box-shadow (盒子阴影) 作用给元素设置阴影效果 属性box-shadow 属性值x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影前两个属性值必填
