首页 前端知识 CSS布局之使用Flex布局画骰子(5点)

CSS布局之使用Flex布局画骰子(5点)

2024-09-01 23:09:03 前端知识 前端哥 756 373 我要收藏

若无基础,请优先阅读学习此文档阮一峰 Flex 布局教程:语法篇

上一篇文章CSS布局之使用Flex布局画骰子(4点)

这次画5个点的骰子。大家可以先看图片默写代码,然后与文中代码做校验,来验证自己是否理解了Flex布局。

骰子样式:

<div class="box">
    <div class="row">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="row-center">
        <span class="item"></span>
    </div>
    <div class="row">
        <span class="item"></span>
        <span class="item"></span>
    </div>
</div>
.box {
	width: 100px;
    height: 100px;
    border-radius: 20px;
    padding: 10px;
    background-color: rgba(230, 230, 230, 1);
    /* 对四条边进行阴影浮雕修饰 */
    box-shadow: inset 0 5px 2px rgba(250, 250, 250, 1),
        inset 5px 0 2px rgba(215, 215, 215, 1),
        inset -5px 0 2px rgba(215, 215, 215, 1),
        inset 0 -5px 2px rgba(187, 187, 187, 1);
}
.item {
    width: 30px;
    height: 30px;
    margin: 2px;
    border-radius: 50px;
    background-color: rgba(51, 51, 51, 1);
    box-shadow: inset 0 5px 2px rgba(22, 22, 22, 1), inset 0 -5px 2px rgba(85, 85, 85, 1)
}

1、5点骰子
在这里插入图片描述

.box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.row {
    display: flex;
    justify-content: space-between;
}
.row-center {
    display: flex;
    justify-content: center;
}

下一篇文章CSS布局之使用Flex布局画骰子(6点)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17412.html
评论
发布的文章

Spring MVC-JSON

2024-06-02 09:06:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!