一个大圆圈里面有个数字,怎么用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 阅读 9 次 更新于 2025-06-20 01:22:05 我来答关注问题0
  •  宸辰游艺策划 一个圆圈里面带有阿拉伯数字是怎么弄的如******

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

  •  深空游戏 如何在word文档中输入圆圈里面有数字的字符

    第一步:新建或打开Word文档,如图所示,单击“带圈字符”按钮,打开“带圈字符”对话框。第二步:如图所示,样式可选“增大圈号”或“缩小字号”,设置”圈号“,输入文字11,单击确定按钮。最终效果如下图所示。首先在word页面中输入“11,12,13”三个数字,需要将这些数字变成带圈字符。选中数字“...

  •  湖北倍领科技 在EXCEL中怎样输入一个圆圈里有个11

    在使用Excel进行数据处理时,有时需要输入一个圆圈内带有数字11的特殊字符。这个字符在某些文档或表格中用于标记特定的信息。首先,您需要找到并双击打开需要编辑的Excel表格。打开后,在输入此特殊字符之前,建议将输入法切换到搜狗输入法,然后点击搜狗输入法右上角的工具箱图标。接着,打开搜狗工具箱,在...

  •  蓝韵文化传媒 在EXCEL中怎样输入一个圆圈里有个11在excel中怎样输入一个圆圈里有个11字符

    1、首先将需要编辑的表格找到,并双击将表格打开。2、打开了表格之后,在输入之前将输入法切换到搜狗输入法,并点击搜狗输入法后面的工具箱图标。3、打开了搜狗工具箱,找后点击里面的符号大全,进入到下一个界面。4、在符号大全里面选择数字序号,切换到数字序号后就可以输入需要的数字了。

  • 首先写背景的样式,按牌的比例写出宽高,留白使用padding来写,css3的新特性我们使用了如图的圆角和阴影,为牌制造立体的感觉 然后来写牌的背景颜色,Uno牌一共有黑红黄绿蓝5种颜色,因此我们只需要事先定义好这五种颜色,之后将其对应的类名添加进来就可以了。另外,因为上下角标的数字需要使用绝对定位...

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

CSS相关话题

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