html中用css实现圆形矩框

分类: IT文章 • 2024-12-19 09:37:01

首先用div设置宽高以及border画出矩形轮廓，然后通过css3中的border-radius属性来设置，从而实现圆形矩框。
具体代码如下：

<style type="text/css">
   .radius {
       width: 300px;
       height: 100px;
       line-height: 100px;
       text-align: center;
       border: 1px solid #4c9fff;
       border-radius: 5px;
   }
</style>

<div class="radius">
   html中用css实现圆形矩框
</div>

效果如下: