CSS/HTML 动画圆形到方形。哪个属性/属性决定形状？

Question

In the included example found on codepen from CSS-Tricks , which property in the css code determines the shape of the div?

I understand most of the css properties here. I am just wondering what determines the shape, and if there is a way to describe/or make other shapes. For example a star or triangle.

I am new to css and would like to learn the language, especially animation tricks.

.element {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: red;
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
    background-color: red;
    border-radius: 100%;
  }
  50% {
    background-color: orange;
  }
  100% {
    transform: scale(1.5);
    background-color: yellow;
  }
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="element"></div>

Answer 1

这里的形状是由border-radius决定的，可以用来把一个HTML元素的边缘修圆(把一个盒子变成圆 Angular 矩形)，或者有足够的半径(或者border-radius: 50%), 它可以将方形元素转换为圆形。没有类似的方法来生成其他形状(三 Angular 形、星形等)，尽管有许多开箱即用的创造性方法可以做到这一点，比如使用 borders to make a CSS triangle。 .