<!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:#bfa;
/*
* 为元素设置边框
* 要为一个元素设置边框必须指定三个样式
* border-width:边框的宽度
* border-color:边框的颜色
* boder-style:边框的样式
*
*/
/*
* 边框大小
*
* 使用border-width可以分别指定边框大小
* -如果在border-width指定了四个值
* 则四个值会分别设置给上 右 下 左 ，按照顺时针的方向设置
*
* -如果指定三个值
* 则三个值会分别设置给 上 左右 下
*
* -如果两个值
* 上下 左右
*
* border-xxx-width
* xxx的值可能是top right bottom left专门用来设置指定边的宽度
*/
border-width: 10px;
/*
* 边框的颜色
* 和宽度一样，color也提供四个方向的样式，可以分别指定边框颜色
*/
border-color: red;
/*
* 边框样式
* 可选值：
* none:默认值，无边框
* solid:实线
* dotted：点状边框
* dashed:虚线
* doublie双线
*
* style也可以分别指定四个边的边框样式，规则和width一样
* 同时他也提供border-xxx-style四个样式，分别设置四个边
*/
border-style: double;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
