使用border属性创建简单的圣诞树

最新推荐文章于 2023-05-20 17:07:21 发布

巧克力otd

最新推荐文章于 2023-05-20 17:07:21 发布

阅读量464

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/jxau_dslj/article/details/122426456

版权

使用border属性创建简单的圣诞树

一、border属性
二、border标签的使用
- 1.绘制三角形
- 2.绘制圣诞树

一、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;
		}

3D沟槽边框

（5）inset :定义3D的嵌入边框

     .box
		{
			width: 100px;
			height: 100px;
			border:5px inset red;
			background-color: greenyellow;
		}

3D嵌入边框

（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;
		}

3D突出边框

（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>

圣诞树

巧克力otd

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用border属性创建简单的圣诞树

使用border属性创建简单的圣诞树一、border属性1、长度（width）2、样式（style）3、颜色（color）二、border标签的使用1.绘制三角形2.绘制圣诞树一、border属性border属性可以规定边框的长度、样式和颜色，border:width style color。1、长度（width）常用边框长度单位有：cm,em,pt,px等2、样式（style）（1）dashed 定义虚线边框 .box { width: 100px; heigh
复制链接

扫一扫