[分享]css中怎么改变把椭圆竖立起来

CSS中怎么改变把椭圆竖立起来？有时候我们需要用到椭圆图形，然而默认情况下椭圆是水平的，如果我们想要把它竖立起来，该怎么做呢？下面就来介绍一下相关的CSS样式。.oval { width: 50px;...

CSS中怎么改变把椭圆竖立起来？

有时候我们需要用到椭圆图形，然而默认情况下椭圆是水平的，如果我们想要把它竖立起来，该怎么做呢？下面就来介绍一下相关的CSS样式。

.oval {
  width: 50px;
  height: 100px;
  border-radius: 50%;
  transform: rotate(90deg);
} 

上面的代码中，我们先定义了一个类名为oval的样式。接着，我们设置了该椭圆的宽度和高度，以及通过border-radius属性设置了该椭圆为圆形。最后，通过transform属性设置该椭圆旋转了90度，就完成了椭圆的竖立。

需要注意的是，transform属性是CSS3中的一个新属性，如果需要兼容IE浏览器需要添加一个-ms-前缀。

.oval {
  width: 50px;
  height: 100px;
  border-radius: 50%;
  -ms-transform: rotate(90deg); /*IE浏览器特有前缀*/
  transform: rotate(90deg);
} 

通过上述方法，我们就可以在CSS中改变椭圆的方向。当然，这只是其中一种方法，还有其他的方式可以实现，希望对大家有所帮助。