【前端】css圆角边框属性讲解（起点闭关计划）

最新推荐文章于 2024-03-12 20:59:35 发布

我叫王不见

最新推荐文章于 2024-03-12 20:59:35 发布

阅读量396

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_48680173/article/details/122976318

版权

CSS border-radius 圆角样式前端开发

关键词由CSDN通过智能技术生成

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在css中，我们能够进行相关边框的属性设置，因此我们的边框不再仅仅局限与直角。圆角的应用很多，常见的百度搜索（可以去看我的百度页面代码的实现那篇文章）就是圆角。

一般我们垂直半径都是省略的默认和水平半径一样。

border-radius: 左上角  右上角  右下角  左下角

这里的顺序是从左上开始的顺时针，不需要特殊去记，多用用就知道了。

常见到的使用
<style>
  div {
    width:200px;
    height:200px;
    border:1px solid red;
    margin:10px 40px;
    text-align: center;
    line-height: 200px;
  }
  div:first-child {
    border:10px solid red;
    border-radius: 20px/50px;
  }
  div:nth-child(2) {
    border-radius: 20px;
  }
  div:nth-child(3) {
    border-radius: 15px 0;
  }
  div:nth-child(4) {
    border-radius:100px;
  }
  div:nth-child(5) {
    border-radius: 50%;
  }
  div:nth-child(6) {
    border-radius: 100px 0;
  }
  div:nth-child(7) {
    border-radius: 200px 0 0 0;
  }
  div:nth-child(8) {
    border-radius: 100px 100px 0 0;
    height:100px;  /*高度减半*/
  }
  div:nth-child(9) {
    border-radius: 100px;
    height:100px;
  }
  div:nth-child(10) {
    border-radius: 100%;
    height:100px;
  }
</style