文章插图
/* width和height只是设置盒子内容区的大小 , 而不是盒子的整个大小 , 盒子可见框的大小由内容区 , 内边距和边框共同决定 。*/.box1 { /* 设置内容区的宽度为400px */ width: 400px; /* 设置内容区的高度为400px */ height: 400px; /* 设置内容区的背景色为green */ background-color: blueviolet; /* 设置该盒子模型的下方外边距为10px */ margin: 0px 0px 10px;}盒子模型效果图 , 盒子可见框的大小由内容区 , 内边距和边框共同决定 。
box1效果图
/* 为元素设置边框必须指定三个样式属性: border-width 表示边框宽度 border-color 表示边框颜色 border-style 表示边框样式 */.box2 { /* 设置边框的宽度为10px , 使用border-width可以指定四个边框的宽度 , 如果border-width后面跟一个值 , 则设置的是上 , 右 , 下 , 左(按照顺时针方向)边框的宽度都是该值(四个宽度都一样); 如果border-width后面跟两个值 , 则分别设置的是上下 , 左右边框的宽度; 如果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效果图
<!-- html代码 --><div class="box1"></div><div class="box1 box2"></div><div class="box1 box3"></div><div class="box1 box4"></div><div class="box1 box5"></div>
以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助:- 快速查找字体的方法 图片查找字体的网站
- win7配置python环境变量 windows python环境变量设置
- iphone录屏设置方法 iphone录屏怎么设置
- 表格根据内容自动调整行高 word表格边框加粗怎么设置
- html字体倾斜标签 css斜体怎么设置
- 电脑键盘快捷键自定义 笔记本快捷键怎么设置
- 路由器隐身设置方法 wifi隐藏怎么设置
- win7win10共享打印机设置 win10共享win7打印机的方法
- 离婚冷静期是什么 给离婚设置冷静期有必要吗
- win10调出设置快捷键 win10快捷键设置在哪里设置