CSS设置椭圆边框

1.椭圆边框的设置——软设问题总结系列

1.1圆角边框

首先圆角边框我们应该都会做
border-radius: 数值px;
这样能得到四个角度一样的圆角边框
例如:

<div>这是一个div</div>
 div {
    
    
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 20px;
            border: 1px red solid;
            border-radius: 50px;
            background-color: bisque;
        }

在这里插入图片描述

1.2 椭圆边框

如果要设置椭圆边框,在border-radius的值可以这样显示50px/100px,例如此例就是
在这里插入图片描述如果把值设置成100px/50px,如下图
在这里插入图片描述综上,椭圆边框的设置即border-radius:数值1px/数值2px;,当两个数值相同时,即为圆角边框.

猜你喜欢

转载自blog.csdn.net/piaoliangj/article/details/112794882