HTML+CSS D07 边框、div

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1.边框（border）

常用表达

border-widthpx

thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

border-styledotted定义点状边框。在大多数浏览器中呈现为实线。 solid定义实线。double定义双线。双线的宽度等于 border-width 的值。groove定义 3D 凹槽边框。其效果取决于 border-color 的值。

border-color

color_name	规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number	规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent	默认值。边框颜色为透明。
inherit	规定应该从父元素继承边框颜色。

border	在一个声明中设置所有的边框属性。	1
border-bottom	在一个声明中设置所有的下边框属性。	1
border-bottom-color	设置下边框的颜色。	2
border-bottom-style	设置下边框的样式。	2
border-bottom-width	设置下边框的宽度。	1
border-color	设置四条边框的颜色。	1
border-left	在一个声明中设置所有的左边框属性。	1
border-left-color	设置左边框的颜色。	2
border-left-style	设置左边框的样式。	2
border-left-width	设置左边框的宽度。	1
border-right	在一个声明中设置所有的右边框属性。	1
border-right-color	设置右边框的颜色。	2
border-right-style	设置右边框的样式。	2
border-right-width	设置右边框的宽度。	1
border-style	设置四条边框的样式。	1
border-top	在一个声明中设置所有的上边框属性。	1
border-top-color	设置上边框的颜色。	2
border-top-style	设置上边框的样式。	2
border-top-width	设置上边框的宽度。	1
border-width	设置四条边框的宽度。	1

例1：

<html>
<head>
<title>div.1</title>
<style type="text/css">
div{width:500px;height:300px;background-color:#eee;
border-bottom-width:5px;
border-bottom-style:dotted;
border-bottom-color:red; border-left-width:10px;
border-left-style:dotted;
border-left-color:green; border-top-width:20px;
border-top-style:dotted;
border-top-color:red; border-right-width:30px;
border-right-style:dotted;
border-right-color:blue;
}
</style>
</head>
<body>
<div>
asdfghjkl
</div>
</body> </html>

例2:

<html>
<head>
<title>div.2</title>
<style type="text/css">
.class1{width:500px;height:300px;line-height:300px;
color:blue;font-size:30px;background-color:red;
border:15px solid green;
text-align:center;
}
.class2{width:400px;height:400px;line-height:400px;
background-color:#aaa;
color:red;font-size:;px;text-align:center;
border:20px dotted blue;
}
</style>
</head>
<body>
<div class="class1">
asdfghjkl
</div>
<div class="class2">
sdnhfajkhfjksdhfu
</div>
</body> </html>

例3：

<html>
<head>
<title>div</title>
<style type="text/css">
div{width:500px;height:300px;background-color:#eee;
border-bottom-width:5px;
border-bottom-style:solid;
border-bottom-color:red; border-left-width:10px;
border-left-style:solid;
border-left-color:green; border-top-width:20px;
border-top-style:solid;
border-top-color:red; border-right-width:30px;
border-right-style:solid;
border-right-color:blue;
}
</style>
</head>
<body>
<div>
asdfghjkl
</div>
</body> </html>