html内容文本框html怎么设置椭圆⽂本框,html–避免CSSborder-radius中的椭
圆形状
形式上,border-radius属性的语法为每个⾓接受2个值：垂直半径和⽔平半径(⽤斜杠分隔).以下⾏将创建⼀个类似于上⾯第三个图像的椭圆边框半径.
border-radius: 5px/10px;
通常，我们只指定⼀个值.在这种情况下，该值被⽤作垂直和⽔平半径.以下⾏将创建⼀个类似于上⾯第⼆个图像的圆形边框半径.
border-radius: 10px;
使⽤百分⽐
Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS data types. Negative values are invalid.
Denotes the size of the circle radius,or the semi-major and semi-minor axes of the ellipsis,using percen
tage values. Percentages for the horizontal axis refer to the width of the Box,percentages for the vertical axis refer to the height of the Box. Negative values are invalid.
当我们使⽤像素或ems这样的绝对长度单位时，使⽤单个值来创建圆形半径很好，但是当我们使⽤百分⽐时会变得更复杂.由于此属性的单值使⽤与使⽤相同值两次同义，因此以下两⾏是等效的；但是，这些不⼀定会产⽣圆形边界半径.
border-radius: 50%;
border-radius: 50%/50%;
这些线表⽰“创建⼀个椭圆或圆，其垂直半径等于元素⾼度的50％，其⽔平半径等于元素宽度的50％，并将其⽤作边界半径.”.如果元素宽200像素,⾼100像素，则会产⽣椭圆⽽不是圆形.
解
如果你想要⼀个圆形的边界半径，最简单的⽅法是使⽤绝对测量单位(如像素或ems或除百分⽐之外的任何东西)，但有时候这不适合你的⽤例并且你想使⽤百分⽐.如果您知道包含元素的纵横⽐，您仍然可以！在下⾯的例⼦中，由于我的元素宽度是它的两倍，我将⽔平半径缩放了⼀半.
#rect {
width: 200px;
height: 100px;
background: #000;
border-radius: 25%/50%;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。