使用border属性创建简单的圣诞树
一、border属性
border属性可以规定边框的长度、样式和颜色,border:width style color。
1、长度(width)
常用边框长度单位有:cm,em,pt,px等
2、样式(style)
(1)dashed 定义虚线边框
.box
{
width: 100px;
height: 100px;
border:5px dashed gray;
}
(2)dotted:定义点线边框
.box
{
width: 100px;
height: 100px;
border:5px dotted gray;
}
(3)double:定义两个边框
.box
{
width: 100px;
height: 100px;
border:5px double red;
}
(4)groove: 定义3D沟槽边框
.box
{
width: 100px;
height: 100px;
border:5px groove red;
background-color: greenyellow;
}
(5)inset :定义3D的嵌入边框
.box
{
width: 100px;
height: 100px;
border:5px inset red;
background-color: greenyellow;
}
(6)none:表示默认无边框
.box
{
width: 100px;
height: 100px;
border:5px none red;
background-color: greenyellow;
}
(7)outset:定义3D突出边框
.box
{
width: 100px;
height: 100px;
border:5px outset red;
background-color: greenyellow;
}
(8)ridge:定义3D脊边框
.box
{
width: 100px;
height: 100px;
border:5px ridge red;
background-color: greenyellow;
}
(9)solid:定义实线边框
.box
{
width: 100px;
height: 100px;
border:5px solid red;
background-color: greenyellow;
}
3、颜色(color)
用于定义边框颜色的有:
name:颜色的名字(例如red、yellow、gray等)
RGB:对红、绿、蓝三原色进行调制,例如rgb(100,100,100);
Hex:使用16进制颜色值,例如#00FF94
二、border标签的使用
1.绘制三角形
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border属性</title>
</head>
<style type="text/css">
.box
{
width: 0px;
height: 0px;
border-bottom: 100px solid green;
border-top: 100px solid red;
border-left:100px solid yellow;
border-right:100px solid bisque;
}
</style>
<body>
<div class="box">
</body>
</html>
2.绘制圣诞树
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.topbranch {
width: 0px;
height: 0px;
/*
* TODO: 上枝叶效果
*/
float: left;
border-bottom: 100px solid green;
border-top: 100px solid transparent;
border-left:100px solid transparent;
border-right:100px solid transparent;
margin-left: 100px;
}
.middleBranch {
width: 0px;
height: 0px;
/*
* TODO: 中枝叶效果
*/
border-top: 200px solid transparent;
border-bottom: 200px solid green;
border-left:200px solid transparent;
border-right:200px solid transparent;
}
.base {
/*
* TODO: 树干效果
*/
float: left;
height: 200px;
width: 70px;
background-color: gray;
margin-left: 165px;
}
</style>
</head>
<body>
<section class="topbranch"></section>
<section class="middleBranch"></section>
<section class="base"></section>
</body>
</html>