1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

border-radius 是设置元素边框圆角的一个属性,它接收以下的取值:

  • 长度
  • 百分比:水平半轴相对于盒模型的宽度,垂直半轴相对于盒模型的高度。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/BamGzgO?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

与许多样式一样,border-radiusborder-top-left-radius(左上角)、border-top-right-radius(右上角)、border-bottom-right-radius(右下角)、border-bottom-left-radius(左下角)的缩写。

因此下面代码就通过设置border-top-left-radius(左上角)为 100% 创造了一个半圆。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/qBVQNeR?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

圆形

当把一个正方形的border-radius 设置为 50% 便可以创建一个圆形。

<div class="box"></div>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: pink;
        border-radius: 50%;
    }
</style>

$$demo

<div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: pink; border-radius: 50%; } </style>

$$


练习

  1. 用圆角创建以下这个图形。

$$demo

<div class="box"></div>

<style>

.box {

width: 100px;

height: 100px;

background-color: teal;

border-bottom-left-radius: 100%;

border-top-right-radius: 100%;

}

</style>

$$