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中改变椭圆的方向。当然,这只是其中一种方法,还有其他的方式可以实现,希望对大家有所帮助。
粉丝
0
关注
0
收藏
0