html – 避免CSS border-radius中的椭圆形状
对矩形div使用Border-radius CSS会产生椭圆角而不是圆角.如何为矩形div获得完美的圆角?
解决方法
形式上,border-radius属性的语法为每个角接受2个值:垂直半径和水平半径(用斜杠分隔).以下行将创建一个类似于上面第三个图像的椭圆边框半径.
border-radius: 5px/10px; 通常,我们只指定一个值.在这种情况下,该值被用作垂直和水平半径.以下行将创建一个类似于上面第二个图像的圆形边框半径. border-radius: 10px; 使用百分比 Mozilla Developer’s Network定义了此属性的可能值类型,如下所示:
当我们使用像素或ems这样的绝对长度单位时,使用单个值来创建圆形半径很好,但是当我们使用百分比时会变得更复杂.由于此属性的单值使用与使用相同值两次同义,因此以下两行是等效的;但是,这些不一定会产生圆形边界半径. border-radius: 50%; border-radius: 50%/50%; 这些线表示“创建一个椭圆或圆,其垂直半径等于元素高度的50%,其水平半径等于元素宽度的50%,并将其用作边界半径.”.如果元素宽200像素,高100像素,则会产生椭圆而不是圆形. 解 如果你想要一个圆形的边界半径,最简单的方法是使用绝对测量单位(如像素或ems或除百分比之外的任何东西),但有时候这不适合你的用例并且你想使用百分比.如果您知道包含元素的纵横比,您仍然可以!在下面的例子中,由于我的元素宽度是它的两倍,我将水平半径缩放了一半. #rect { width: 200px; height: 100px; background: #000; border-radius: 25%/50%; } <div id="rect"></div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |