<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子模型</title> <style type="text/css"> .box1{ /* 使用width来设置盒子内容区的宽度 使用height来设置盒子内容区的高度 width和height只是设置的盒子内容区的大小,而不是盒子的整个大小 盒子可见框的大小由内容区,内边距和边框共同决定 */ width: 100px; height: 100px; background-color: orange; /* 为元素设置边框 腰围一个元素设置边框必须指定3个样式 border-width: 边框的宽度 border-color: 边框颜色 border-style: 边框的样式 */ border: 1px black solid; /* 使用border-width可以分别指定四个边框的宽度 如果在border-width指定了四个值 则四个值分别设置给 上 右 下 左,按照顺时针的方向设置的 如果指定三个值 则这三个值会分别分配给 上 左右 下 如果指定两个值 则这两个值会分别设置给 上下 左右 */ border-width: 10px 20px 30px 40px; /* 除了border-width,css中还提供了四个border-xxx-width xxx的值可能是top right bottom left 专门用来设置指定的宽度 */ border-left-width: 40px; /* 设置边框的颜色 和宽度一样,color也是体况四个方向的样式,可以分别指定颜色 border-xxx-color */ border-color: red yellow green blue; /* 设置边框的样式 可选值: none 默认值没有边框 solid 实线 dotted 点状边框 dashed 虚线 double 双线 style也可以分别指定四个边的边框样式,规则和width一致 同时他也提供border-xxx-style四个样式,分别设置四个边 */ border-style: double; } </style> </head> <body> <div class="box1"> </div> </body> </html>
浙公网安备 33010602011771号