css3新增属性--圆角

最新推荐文章于 2022-07-10 22:07:05 发布

CSH_lucky

最新推荐文章于 2022-07-10 22:07:05 发布

阅读量403

点赞数

分类专栏： border-radius 文章标签： css3

本文链接：https://blog.csdn.net/CSH_lucky/article/details/105624323

版权

border-radius 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

导言

像对于css而言，css3中又新增了许多选择器和属性，今天我们重点来看看css3中新增的属性中的圆角。

一、border-radius(圆角)

border-radius:top-left、top-right、bottom-right、bottom-left ;
平常有下面几种写法：

只有一个值，四个圆角相等。
有两个值，那么 top-left 等于 bottom-right，并且取第一个值；top-right 等于 bottom-left，并且取第二个值
有三个值，其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。
有四个值，其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。
案例：
1、用圆角写导航栏样式

ul li{
  width:150px;
  height:80px;
  background-color:#cb18f8;
  border-radius:0 50px 0 50px;
  list-style: none;
  float: left;
}
<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

在这里插入图片描述
2、八卦图

<div class="sun"></div>
.sun {
  width: 96px;
    height: 48px;
    background: #eee;
    border-color: #000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
.sun:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid #000;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
.sun:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #000;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}