欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS_09_盒子模型(二)

程序员文章站 2022-05-27 09:02:36
...

CSS3盒模型

box-sizing设置盒子类型,默认盒子模型为content-box,css3增加了border-box,这样计算盒子的大小方式也发生改变。

  1. box-sizing:content-box 盒子大小等于width+padding+bolder;
  2. box-sizing:border-box 盒子的大小为width,也就是说设置paddingbolder不会撑开盒子。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
       div:first-child {
           color: red;
           width: 200px;
           height: 50px;
           border: 1px solid #000;
           /*默认盒子模型*/
           box-sizing: content-box;
           padding: 50px;
           margin: 10px;
       }
        div:last-child {
            width: 200px;
            height: 80px;
            border: 10px solid red;
            box-sizing: border-box;
            padding-left: 30px;
            /* 边框往里面增加,padding值如果在容量范围内不会撑大盒子*/
        }
    </style>
</head>
<body>
    <div>默认centent-box 盒子模型</div>
    <div>css3新增 border-box</div>

</body>
</html>

盒子阴影

box-shadown用来设置盒子阴影,与文字阴影相似。

格式:box-shadown:水平阴影 垂直阴影 阴影程度 阴影颜色 阴影尺寸(面积大小) 内外阴影(inset);

内外阴影设值为outset不起作用,而且还会报错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
    <style>
        div:first-child {
            color: yellow;
            font-size: 40px;
            /*水平距离 垂直距离 模糊程度 阴影颜色*/
            text-shadow: 5px 5px 1px rgba(0,0,0,0.1);
        }
        div:last-child {
            width: 200px;
            height: 200px;
            border: 5px solid pink;
            /*水平距离 垂直距离 模糊程度 阴影尺寸(影子大小) 阴影颜色 内外阴影(只允许写inset)*/
            box-shadow: 5px 5px 10px 5px rgba(255,0,0,0.2) inset;
        }
    </style>
</head>
<body>
    <div>大吉大利,今晚吃鸡</div>
    <div></div>
</body>
</html>

比如小米的官网就用盒子阴影效果,鼠标点击商品时就会出现阴影。
CSS_09_盒子模型(二)

简单效果实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子阴影模拟</title>
    <style>
        body {
            background-color: #f5f5f5;
        }
        .mi {
            height: 246px;
            width: 234px;
            border-right: 1px solid #ffffff;
            background-color: #fff;
            margin: 200px 200px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.4);
        }
        .img {
            height: 150px;
            width: 150px;
            background-image: url("../img/mi.jpg");
            background-size: 150px 150px;
            background-repeat: no-repeat;
            margin: 10px 40px;
        }

        a {
            text-decoration: none;
            color: #000;
        }
        span {
            display: inline-block;
            padding-left: 30px;
        }
        .big a {
            color: #000;
            font: 14px "Helvetica Neue";

        }
         .small a {
            color: #9d9d9d;
            font: 10px "Helvetica Neue";
            padding-left: 12px;
        }
       .price  {
            color: #ff6700;
            font-size: 12px;
           padding: 10px 90px;
        }


    </style>
</head>
<body>
    <div class="mi">
        <div class="img"></div>
        <span class="big">
            <a href="#">米家互联网空调(一级能效)</a>
        </span> <br>
        <span class="small">
             <a href="#">米家互联网空调(一级能效)</a>
        </span>
        <span class="price">
            2294元
        </span>
    </div>
</body>
</html>

CSS_09_盒子模型(二)

立体球

设置内部盒子阴影为高光和外部盒子阴影暗黑,达到视觉立体效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水晶</title>
    <style>
        div {
            width: 249px;
            height: 249px;
            margin: 100px;
            background: #fff url("../img/水晶.jpeg") 0 0 no-repeat;
            font-size: 30px;
            text-align: center;
            color: rgba(255,255,255,0.8);
            line-height: 249px;
            border-radius: 50%;
            /* 内阴影和外阴影效果*/
            box-shadow: 5px 5px 5px 5px rgba(255,255,255,0.4) inset,
            5px 4px 10px rgba(0,0,0,0.4);
        }
    </style>
</head>
<body>
<div>水晶图片</div>
</body>
</html>

CSS_09_盒子模型(二)