1.边框属性 border
□
边框样式
border-style:none|dotted|dashed|solid|......
none:没有边框.
dotted点线dashed虚线solid实线.....等等
边框样式也可以像padding一样,用4个值分别定义上下右左4个边框样式.
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
以上可以简写成为:(顺序为钟面原则:上右下左)
border-style:dotted solid dotted
solid;
若上下值相同\左右值相同,则又可以简化成为
border-style:dotted solid;
□ 边框宽度
border-width:medium|thin|thick|长度值
medium:
默认值thin:比默认值细thick:比默认值粗长度值:
边框宽度也可以像padding一样,用4个值分别定义上下右左4个边框宽度,各不相同.
border-top-width:10px;
border-right-width:5px;
border-bottom-width:10px;
border-left-width:5px;
以上可以简写成为:(须序为钟面原则:上右下左)
border-width:10px 5px 10px 5px;
若上下值相同与左右值相同,则又可以简化成为
border-width:10px 5px;
□ 边框颜色
border-color:颜色值;
border-top-clolr:#cccccc;
border-right-clolr:#999999;
border-bottom-clolr:#cccccc;
border-left-clolr:#999999;
以上可以简写成为:(须序为钟面原则:上右下左)
border-color:#cccccc #999999 #cccccc #999999;
若上下值相同与左右值相同,则又可以简化成为
border-color:#cccccc #999999;
□ 边框的综合定义
border:border-style border-width
border-color;
其中,每个属性的顺序可以随意交换,每个属性之间用空格分隔.
border:#999999
10px solid;
该样式定义了边框颜色为淡灰色,边框宽度为10px,边框样式为实线.
□ 单侧边框的综合定义
border-top:border-style border-width
border-color;
border-right:border-style border-width border-color;
border-bottom:border-style border-width
border-color;
border-left:border-style border-width
border-color;
2.补白属性 padding
padding:长度值|百分比(百分比一般不建议用)
padding-top:20px;
padding-right:10px;
padding-bottom:20px;
padding-left:10px;
以上可简写成为:(顺序为钟面原则:上右下左)
padding:20px 10px
20px 10px;
如果上与下同值,右与左则值,则又可以简写成为:
padding:20px 10px;
如果左边值未设,则默认为与右边相同,若两边都没设,则默认为0.上下值设置相同.
如果觉得《css样式 向下补白 div+css[3]:css中边框border与补白padding属性设置》对你有帮助,请点赞、收藏,并留下你的观点哦!