这里圆的半径是多大

这里圆的半径是多大

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

.baguatu{

position: absolute;

margin: auto;

padding: 0px;

top: 0;

bottom: 0;

left: 0;

right: 0;

width: 192px;

height: 96px;

/*  background: red; */ /* 这里background默认为transparent的 */

border-style: solid;

border-color: black;

border-width: 2px 2px 96px 2px;

    border-radius:50%; 

}  

/* .baguatu::before{

content: ""; 

position: absolute;

top: 50%;/* 50%意思是父元素高度height的一半 */

/* right: 0px;

width: 24px;

height: 24px;

background-color: white;

border: 36px solid black;

border-radius: 50%;

} */ 

</style>

</head>

<body>

<div class="baguatu"></div>

</body>

</html>

之前提问过,已经了解border-radius是根据父元素的实际占据面积来计算的,那么这里实际宽高好像不一样,圆的半径究竟多少呢,还是这里把宽度为2px的boder的宽忽略不计了呢?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕言 2019-12-28 10:19:46

同学你好,如果同学想实现一个正圆,那么宽高的值要保证一样,再配合border-radius: 50%;实现。

可以参考下方的例子:

http://img1.sycdn.imooc.com//climg/5e06baee09cce2a704850391.jpg

效果图:

http://img1.sycdn.imooc.com//climg/5e06bb0d0952f54402130211.jpg

如果还有其他疑问,建议同学在问答区新建问题进行提问,便于后期查找总结

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

好帮手慕言 2019-12-27 18:59:45

同学你好,半径是包括边框的。如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 我知道半径包括边框,可是那样的话,这里的半径就是97和98两种了,然后不能凑成一个圆吧
    2019-12-27 19:13:16
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师