lovecoding
/
J250419


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS边框样式</title>
    <!--边框样式属性-->
    <style>
        /*所有的h1标签中class的属性值是dotted的标签，会渲染当前选择器的样式*/
        h1.dotted {
            border-style: dotted;   /*边框样式：点线样式*/
            border-width: 5px;  /*边框宽度*/
            border-color: #00ff00;  /*边框颜色*/

        }
        h1.dashed {
            border-style: dashed;   /*边框样式：虚线样式*/
            border-width: 5px;  /*边框宽度*/
            border-color: #0000ff;  /*边框颜色*/
        }
        h1.solid {
            border-style: solid;   /*边框样式：实线样式*/
            border-width: 5px;  /*边框宽度*/
            border-color: #ff0000;  /*边框颜色*/
        }
        h1.groove {
            border-style: groove;   /*边框样式：3D坡口样式*/
            border-width: 5px;  /*边框宽度*/
            border-color: #0f0f00;  /*边框颜色*/
        }
        h1.ridge {
            border-style: ridge;   /*边框样式：3D脊线样式*/
            border-width: 5px;  /*边框宽度*/
            border-color: #00ff00;  /*边框颜色*/
        }
        h1.solid-top {
            border-top-style: solid;   /*边框样式：实线样式*/
            border-width: 5px;  /*边框宽度*/
            border-color: #ff0000;  /*边框颜色*/
        }
        h1.solid-left {
            border-left-style: solid;   /*边框样式：实线样式*/
            border-width: 5px;  /*边框宽度*/
            border-color: #ff0000;  /*边框颜色*/
        }
        h1.solid-right {
            border-right-style: solid;   /*边框样式：实线样式*/
            border-width: 5px;  /*边框宽度*/
            border-color: #ff0000;  /*边框颜色*/
        }
        h1.solid-bottom {
            border-top-style: dotted;
            border-left-style: dashed;
            border-right-style: groove;
            border-bottom-style: solid;
            border-width: 5px;  /*边框宽度*/
            border-color: #ff0000;  /*边框颜色*/
        }
    </style>
</head>
<body>
    <a href="http://" class="dotted">百度</a>
    <h1 class="dotted">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="dashed">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="solid">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="groove">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="ridge">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="solid-top">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="solid-left">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="solid-right">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="solid-bottom">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="">我是一个h1标签的内容，我有我自己的样式</h1>
    <h1 class="">我是一个h1标签的内容，我有我自己的样式</h1>
</body>
</html>