Div标签形状未显示

问题描述

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <Meta name="viewport" content="width=device-width,initial-scale=1">

  <title>HTML</title>
  
  <!-- HTML -->
  

  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="face"></div>
    <div class="eyeleft"></div>
    <div class="eyeright"></div>
    <div class="smile"></div>
  </div>
  <!-- Project -->
  <script src="main.js"></script>
</body>
</html>

我尝试使用以下css代码创建圆角，并且应将其链接到div标签。

.face {
  color: #ffe9d1;
  top: 100px;
  left: 100px;
  border-width: 100px,100px,100px;
  border-radius: 50px,50px,50px;
}

没有任何更多细节要包括在内，但也许这样做。

请解释为什么它不显示

解决方法

您用于指定border-width和border-radius的语法不正确。

您必须改为使用此：

.face {
  color: #ffe9d1;
  top: 100px;
  left: 100px;
  border-radius: 50px; /* Notice this */
  border: 100px red solid; /* Notice this */
}

  <div class="container">
    <div class="face"></div>
    <div class="eyeleft"></div>
    <div class="eyeright"></div>
    <div class="smile"></div>
  </div>

border-width和border-radius的语法确实接受4个值，所以这不是问题。

但是：border属性在CSS中需要3个参数：border-width，border-style和border-color。这里border-style丢失了。例如，将其设置为“ solid”。如果未定义，则默认为“无”，这是不可见的。修改后的CSS给出结果->

.face {
  color: #ffe9d1;
  top: 100px;
  left: 100px;
  border-style: solid;
  border-width: 100px,100px,100px;
  border-radius: 50px,50px,50px;
}

css-shapes html