css 样式边框变成椭圆

CSS 样式边框变成椭圆，是一种美观的效果，可以让网页看起来更加现代化。

要实现这种效果，可以使用 CSS 的 border-radius 属性。该属性控制边框的圆角弧度，适用于所有的 HTML 元素。

div{
    width: 200px;
    height: 100px;
    border: 2px solid #ccc;
    border-radius: 50%;
}

在上面的代码中，我们设置 div 元素的宽度、高度和边框属性，然后使用 border-radius 属性将边框变成椭圆形。

其中，border-radius 属性的值可以是一个简单的数值，表示四个圆角的弧度相同。也可以设置为两个数值，表示水平与垂直方向的圆角弧度。还可以设置为四个数值，表示四个方向的圆角弧度。

值得注意的是，使用 border-radius 属性时，应该给元素添加一个背景色，否则边框的圆角部分会透过背景色露出。

另外，如果要将元素的边框变成椭圆形，并且边框宽度不同，则需要设置 Box-shadow 属性来遮盖掉直角部分的边框。

div{
    width: 200px;
    height: 100px;
    border-top: 5px solid blue;
    border-right: 5px solid yellow;
    border-bottom: 5px solid green;
    border-left: 5px solid red;
    border-radius: 50%;
    Box-shadow: 0 0 0 2px #fff;
}

在上面的代码中，我们给元素的四个边框分别设置了不同的边框宽度和颜色，然后使用了 border-radius 和 Box-shadow 属性来将边框变成椭圆形，并遮盖掉直角部分的边框。

总之，CSS 样式边框变成椭圆，是一种简单而又实用的效果，可以让网页看起来更加漂亮。