border-style之dotted显示一个圆

来源：互联网发布：floyd算法简单例题编辑：程序博客网时间：2024/06/04 22:44

dotted边框：

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>制作我的第一个网页</title>        <style type="text/css">            .dotted{                width:150px;                height:150px;                border:149px dotted red;            }        </style>    </head>    <body>        <div class="dotted"></div>    </body></html>

效果：
这里写图片描述
改进后：

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>制作我的第一个网页</title>        <style type="text/css">            .box{                width:150px;                height:150px;                overflow:hidden;            }            .dotted{                width:100%;                height:100%;                border:149px dotted red;            }        </style>    </head>    <body>        <h1>Hello World</h1>        <div class="box">        <div class="dotted"></div>        </div>    </body></html>

效果如图:
这里写图片描述

0 0