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