本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01css样式颜色怎么设置-css设置字体颜色代码

/* width和height仅仅设定小盒子內容区的尺寸，而不是小盒子的全部尺寸， 小盒子由此可见框的尺寸由內容区，内边距和外框一同决策。 */.box1 { /* 设定內容区的间距为400px */ width: 400px; /* 设定內容区的相对高度为400px */ height: 400px; /* 设定內容区的背景颜色为green */ background-color: blueviolet; /* 设定该盒子模型的下边外边距为10px */ margin: 0px 0px 10px;}

盒子模型设计效果图，小盒子由此可见框的尺寸由內容区，内边距和外框一同决策。实体模型3D渲染时，由此可见框的尺寸由內容地区，內部行高和外框决策。

Box1设计效果图。

/* 为原素设定外框务必特定三个款式特性： border-width 表明外框总宽 border-color 表明外框色调 border-style 表明外框款式 */.box2 { /* 设定外框的间距为10px，应用border-width能够特定四个外框的总宽， 假如border-width后边跟一个值，则设定的是上，右，下，左(依照顺时针)外框的总宽全是该值(四个总宽都一样)； 假如border-width后边跟2个值，则各自设定的是左右，上下外框的总宽； 假如border-width后边跟三个值，则各自设定的是上，上下，下外框的总宽； 假如border-width后边跟四个值，则各自设定的是上，右，下，左外框的总宽； 本例中只设定一个值，表明四个外框的总宽全是10px。 */ border-width: 10px; /* 设定外框的色彩为red，应用border-color能够特定四个外框的色调，设定标准与border-width同样， 本例中只设定一个值，表明四个外框的色调全是red。 */ border-color: red; /* 设定外框的款式为solid，应用border-style能够特定四个外框的款式，设定标准与border-width同样， border-style常见的值有none(默认设置无框)，solid(虚线)，dotted(斑点状)，dashed(斜线)，double(多线)这些， 本例中只设定一个值，表明四个外框的款式全是solid。 */ border-style: solid;}

Box2设计效果图。

.box3 { /* 设定左右外框总宽为10px，上下外框总宽为20px */ border-width: 10px 20px; /* 设定左右外框色调为red，上下外框色调为green */ border-color: red green; /* 设定左右外框款式为solid，上下外框款式为dotted */ border-style: solid dotted;}

Box3设计效果图。

.box4 { /* 设定上外框总宽为10px，上下外框总宽为20px，下外框总宽为30px */ border-width: 10px 20px 30px; /* 设定上外框色调为red，上下外框色调为green，下外框色调为yellow */ border-color: red green yellow; /* 设定上外框款式为solid，上下外框款式为dotted，下外框款式为dashed */ border-style: solid dotted dashed;}

Box4设计效果图。

.box5 { /* 设定上，右，下，左外框的总宽分别是10px，20px，30px，40px */ border-width: 10px 20px 30px 40px; /* 设定上，右，下，左外框的色调分别是red，green，yellow，blue */ border-color: red green yellow blue; /* 设定上，右，下，左外框的款式分别是solid，dotted，dashed，double */ border-style: solid dotted dashed double;}

Box5设计效果图。