CSS设置椭圆边框

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

  • 1.1圆角边框
  • 1.2 椭圆边框

1.1圆角边框

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

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

CSS设置椭圆边框_第1张图片

1.2 椭圆边框

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

你可能感兴趣的:(前端,css,html)