盒模型box-sizing:border-box;

最新推荐文章于 2023-03-26 16:03:13 发布

每天努力搬砖

最新推荐文章于 2023-03-26 16:03:13 发布

阅读量182

点赞数

本文链接：https://blog.csdn.net/txw0415/article/details/80425645

版权

用盒模型实现一个简单的日历

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小日历的实现</title>

    <style>
        ul {
            margin: 30px;
            padding: 0;
            width: 420px;
            list-style: none;
        }
        
        li {
            float: left;
            width: 60px;
            height: 60px;
            border: 1px solid #000;
            /* 盒模型 */
            box-sizing: border-box;
            margin-left: -1px;
            margin-top: -1px;
            text-align: center;
            line-height: 60px;

        }

        li:hover {
            /* 盒子阴影
            0px 水平偏移
            0px：垂直偏移
            25px：模糊程度
            inset 出现内阴影 不写inset 出现外阴影
            */
            box-shadow: 0px 0px 25px green inset;
        }

        li:nth-child(7n-1) {
            background-color: hotpink;
        }

        li:nth-child(7n) {
            background-color: skyblue
        }

        li:nth-child(30) {
            background-color: red;
        }

    </style>
</head>
<body>
    <ul>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期日</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
    </ul>
</body>
</html>

总结:

一盒子阴影

1 盒子阴影的参数说明
2 盒子阴影与文字阴影的设置大体相同
* box-shadow: 5px 6px 7px 8px red inset;
* 5px: 水平偏移
* 6px：垂直偏移
* 7px：模糊程度
* 8px: 阴影向所有方向放大或缩小（极少用）
* inset 要么不写，要么写inset，没有outset值，写了会报错，如果设了inset会出现内阴影

二内阴影的实现技巧
* 1. 比如需求是左下有内阴影
* 2. 就先设置反方向（右上）的外阴影
* 3. 阴影方向设为inset