Menu
CoddyTech

边框样式

Coddy CSS 项目:简单的加载动画 课程的第 5 课,共 6 课。

给微调器边框添加一些圆角样式。

若要只为特定角对应的边框设置颜色,请使用以下顺序:上、右、下、左。

border-color: black transparent black transparent

这样只会将上边框和下边框的颜色设为黑色。你也可以使用 border-top-color 和 border-bottom-color 属性!

别忘了添加 border-width 和 border-style。

challenge icon

挑战

简单

移除加载旋转器的背景颜色,并添加以下 CSS 属性:

  • border-width 设置为 6px
  • border-style 设置为 solid
  • 只为 上边 和 下边 设置 border-color,颜色由你选择!(左边框和右边框应为 transparent)

还要将整个旋转器的边框设为圆角。如果你不确定如何设置,请查看提示。

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="spinner" />
</body>
</html>

CSS 项目:简单的加载动画中的所有课

自己练习: Web 在线编辑器