为了方便阅读，我选择一种模式，适合不同的人学习。

我先简单介绍一下我的这个想法。学习编程的人不阅读代码是根本不行的，为了增加阅读代码的效率，我想要将文章分区，分成程序员部分，和业外人事。程序员部分为代码阅读，整篇文章代码内容，我就放到这里。方便大家阅读代码。可能每个人都有每个人的写作模式。意义：大家阅读我的代码就相当于自己写了一篇，你可以发现里面的错误，或者你认为这个地方有什么不合适，什么的，可以提高大家的代码识错能力，也可以提高大家代码阅读速度。最主要的是可以提高自己的技能，何乐而不为。模式如下：

圆角边框其实并不难，全程代码！初学者都可以看懂！_代码阅读

​

代码阅读：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
      *{margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
      }
      a{
        text-decoration: none;
      }
      .head{
        width: 1000px;
        height: 75px;
        margin: 20px auto;
      }
      .head h2{
        color: #333;
        text-align: center;
      }
      .head .text{
        text-indent: 2em;
      }
      .img{
        width: 800px;
        height: 400px;
        margin: 0 auto;
      }
      .img img{
        float: left;
      }
      .texttwo{
        width: 1000px;
        height: auto;
        margin: 0 auto;
      }
      .texttwo p{
        text-indent: 2em;
      }
      .texttwo table{
        margin: 0 auto;
      }
      .texttwo table td{
        width: 200px;
        height: 50px;
      }
</style>
</head>
<body>
<div class="head">
<h2>圆角边框并不难，全程代码，一看就懂...</h2>
<p class="text">
<!-- text-indent: 2em;首行缩进 -->
        今天我带大家学一下圆角边框，大家可能好奇，会问，圆角边框是啥?其实我刚接触的时候，我也在想，这个怎么做，用什么标签，用什么属性？它有什么属性值？
        这个属性到底有什么实战意义，我自己大概知道，没有实战意义的就没有必要去学习了，但是该懂得还是得懂。
</p>
</div>
<div class="img">
<img src="img/QQ图片20210614172511.png" width="600px" height="400px" />
<img src="img/W%5DD2RSCOL%5D@HML_LV00ECMC.png" width="200px" height="400px" />
</div>
<div class="texttwo">
<div style="width: 1000px; height: 20px;"></div>
<p>大概我们可以从上图中看到，在很多地方使用了圆角边框，比如：新人福利，京东会员，精选热点以及下面的列表元素。</p>
<p>那么这个圆角边框怎么做呢？</p>
<p>在做之前我们先了解一下圆角边框的属性和属性值。</p>
<div style="width: 1000px; height: 20px;"></div>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>属性</th>
<th>属性介绍</th>
</tr>
<tr>
<td>border-radius:20px;</td>
<td>设置元素的外边框圆角</td>
</tr>
<tr>
<td>原理:</td>
<td>椭圆与边框的交集形成圆角效果</td>
</tr>
</table>
<div style="width: 1000px; height: 20px;"></div>
<p>那么，我们学到了属性都要回归实战。我们先设置一个div，给这个div添加一个背景颜色。</p>
<div style="width: 1000px; height: 20px;"></div>
<div style="width: 500px; height: 100px; background-color: black; border-radius: 50px; text-align: center; margin: 0 auto;">
<span style="color: azure; line-height: 100px;">我就是一个半径50的圆角边框</span>
</div>
<div style="width: 1000px; height: 20px;"></div>
<p>大家看到了以上的代码应该就会了吧，如果高是100px，我们设置半径是50px，两边就呈现出半圆，那么我们好奇了，可以可以设置成整个圆？</p>
<p>那当然是可以的啦，我们高度设置为一半，两边就成半圆了，那么我们设置宽的一半是不是就可以了，前提是大块div的宽高是相等的（正方形）</p>
<div style="width: 1000px; height: 20px;"></div>
<div style="width: 100px; height: 100px; background-color: mediumvioletred; border-radius: 50px; text-align: center; margin: 0 auto;">
<span style="color: azure; line-height: 100px;">我是一个圆</span>
</div>
<div style="width: 1000px; height: 20px;"></div>
<p style="text-align: center; color: blueviolet;">
        这个圆角边框运用范围很广的，建议大家好好看看，大家感觉对自己有帮助，还希望大家点个关注。
</p>
<img src="img/QEWFA04BM%7D3_R3N%25%5BWL6PKT.jpg"style="width: 200px; height: 200px;padding-left: 400px;" />
<p style="text-align: center; color: cornflowerblue;">期待与大家一起学习!!!</p>
<div style="width: 1000px; height: 20px;"></div>
<div style="width: 1000px; height: 20px;"></div>
</div>
</body>
</html>

图片阅读：

圆角边框其实并不难，全程代码！初学者都可以看懂！_圆角边框_02

大家好，我叫她的码农，平常喜欢分享web前端的入门和进阶，关注我，可以提升大家的web前端知识水平以及实战能力！