发布于2021-10-12 09:12 阅读(651) 评论(0) 点赞(24) 收藏(4)
使用 React 创建圆形和方形形状的方法是什么,它们可以在其中包含自定义文本而不使用 SVG 图像?一个例子:
我尝试了以下代码,但它没有呈现任何形状:
import React from 'react';
export default function Circle(){
return(
<div height="110" width="500">
<circle
cx="50"
cy="55"
r="45"
fill="none"
stroke="#F0CE01"
strokeWidth="4"
/>
</div>
);
}
您甚至可以使用div
标签来做到这一点。只需添加border-radius
即可创建一个圆圈。
反应示例:https : //codesandbox.io/s/shapes-qbf1f
这是一个快速概述的片段:
.square {
display: flex;
width: 100px;
height: 100px;
background-color: red;
}
.circle {
display: flex;
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
.text {
margin: auto;
}
<div class="square">
<p class="text">Square text</p>
</div>
<div class="circle">
<p class="text">Circle text</p>
</div>
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/202672/eab3dac77490d4e1254f/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!