div变为椭圆
时间: 2023-06-21 22:25:01 浏览: 224
JS实现div圆弧
要将`div`变为椭圆,可以使用CSS3中的`border-radius`属性。`border-radius`属性可以设置四个角的圆角半径,当四个角的圆角半径都设置为相同的值时,`div`就会变成一个正圆。如果将四个角的圆角半径设置为不同的值,就可以将`div`变为椭圆。
例如,将`div`设置为一个200px宽、100px高的椭圆,可以这样设置样式:
```css
div {
width: 200px;
height: 100px;
border-radius: 100px / 50px;
}
```
这里的`border-radius`属性的值为`100px / 50px`,其中`100px`表示水平方向的圆角半径,`50px`表示垂直方向的圆角半径。这样就可以将`div`变成一个椭圆形。如果希望椭圆的形状更加扁平或者更加高瘦,可以适当调整水平和垂直方向的圆角半径的比例。
阅读全文