一个大圆圈里面有个数字,怎么用HTML + CSS实现?

4 首先我们需要分析一下整个牌的构造,以普通数字牌1为例,共可分为5个部分,分别是1、外框2、颜色3、上下角标数字4、里面的白色椭圆5、中间的大数字 对应不同的部分,我们将其分解为5部分的html代码并为其添加class,1、卡牌背景2、卡牌颜色(由于布局相同只有颜色不同,故将颜色抽出成为单独...
一个大圆圈里面有个数字,怎么用HTML + CSS实现?
<body>
<div style=" width:50px; height:50px; background-color:#F00; border-radius:25px;">
<span style="height:50px; line-height:50px; display:block; color:#FFF; text-align:center">4</span>
</div>
</body>
首先我们需要分析一下整个牌的构造,以普通数字牌1为例,共可分为5个部分,分别是1、外框2、颜色3、上下角标数字4、里面的白色椭圆5、中间的大数字
对应不同的部分,我们将其分解为5部分的html代码并为其添加class,1、卡牌背景2、卡牌颜色(由于布局相同只有颜色不同,故将颜色抽出成为单独的类)3、上下角标数字4、白色椭圆背景5、大数字
以下均采用代码和效果图对比的方式展示效果

布好局之后,为其添加样式。首先新建css样式表,并将其关联至html文件

首先写背景的样式,按牌的比例写出宽高,留白使用padding来写,css3的新特性我们使用了如图的圆角和阴影,为牌制造立体的感觉

然后来写牌的背景颜色,Uno牌一共有黑红黄绿蓝5种颜色,因此我们只需要事先定义好这五种颜色,之后将其对应的类名添加进来就可以了。
另外,因为上下角标的数字需要使用绝对定位,因此它们的父级元素就需要定义为相对定位

下面来写上下角标的数字,由于这里使用的是em行内元素标签,因此设置宽高的时候要记得display:inline-block。
绝对定位到需要的位置,然后将右下角的数字使用css3的旋转函数180度旋转,就可以制造出倒过来的数字了
中间的白色椭圆要怎么画呢,我们知道border-radius的值与宽高相等可以画出圆形,那么当它的值为宽的一半比高的一半时,则可以画出椭圆形,这时我们再将它旋转到合适的角度,就可以得到想要的椭圆

最后就是中间的数字,由于它是椭圆形的子元素,因此椭圆形旋转的时候,它也跟着一起旋转,要想让它摆在一个比较正的位置,还应将它旋转回来。并为它挑选一个合适的字体

至此,我们的普通数字牌已经写好了
2018-01-22
mengvlog 阅读 26 次 更新于 2025-08-06 20:57:01 我来答关注问题0
  •  阿暄生活 怎么才能输入一个圆圈里面一个数字 12 或者18等等.

    在Word中,输入一个圆圈里面包含数字12或18等字符,可以通过以下步骤实现:打开Word文档:首先,确保你已经打开了Word文档,并处于可以编辑的状态。选择插入位置:将光标移动到你希望插入带圈字符的位置。打开带圈字符功能:点击菜单栏中的“格式”选项。在下拉菜单中,选择“中文版式”。接着,选择“带圈...

  •  阿暄生活 一个圆圈里面带有阿拉伯数字是怎么弄的如******

    使用图形编辑软件:打开一款图形编辑软件。使用形状工具创建一个圆形。选择文本工具,在圆圈内部输入所需的阿拉伯数字。可以调整数字的字体、大小、颜色等属性,使其清晰可见。操作细节:在创建圆形时,确保它是一个完美的圆形,可以通过软件的形状工具轻松实现。输入数字时,使用文本工具,并可以通过对齐工具将...

  •  宸辰游艺策划 一个圆圈里面带有阿拉伯数字是怎么弄的如******

    1. 使用图形编辑软件:这是最常见且效果较好的方式。你可以打开一款图形编辑软件,创建一个圆形,然后在圆圈内部输入阿拉伯数字。你可以调整字体、大小、颜色等,以使数字清晰可见。2. 操作方式:在大多数图形编辑软件中,你可以使用形状工具来创建一个完美的圆形。接着,选择文本工具,在圆圈内部输入数字。

  •  阿暄生活 圆圈里面写一个1怎么打出来

    圆圈里面写一个1可以通过以下方法打出来:方法一:使用Word文档的“带圈字符”功能 打开Word文档。 输入数字“1”。 点击“带圈字符”功能。 在弹出的对话框中选择输入的“1”,并选择合适的圈号。 点击确定,即可得到一个圆圈里面写有“1”的字符。方法二:使用输入法符号库 打开文本输入界面。 调用...

  •  唔哩头条 在word里怎么输入项目符号:一个圆圈里写个13、14等(不是个位数)?

    在Word中输入项目符号,如圆圈中的数字13、14等,可以通过以下步骤操作:首先,选择“开始”菜单中的“字体”选项。在较早的Word版本中(Word 2003),可能需要转到“格式”菜单下的“中文版式”来设置。尽管可以选择带圈的字符,但直接修改其域代码可能不会得到理想的效果,因为调整圆圈或数字大小后的...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部