CSS_09_盒子模型(二)

最新推荐文章于 2023-11-26 18:15:02 发布

M r.J

最新推荐文章于 2023-11-26 18:15:02 发布

阅读量122

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43196061/article/details/87542194

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS3盒模型

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

box-sizing:content-box 盒子大小等于width+padding+bolder;
box-sizing:border-box 盒子的大小为width,也就是说设置padding、bolder不会撑开盒子。

<!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>

比如小米的官网就用盒子阴影效果，鼠标点击商品时就会出现阴影。
在这里插入图片描述

简单效果实现

<!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>

在这里插入图片描述

立体球

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

<!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>

在这里插入图片描述

M r.J

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS_09_盒子模型(二)

CSS3盒模型box-sizing设置盒子类型，默认盒子模型为content-box,css3增加了border-box,这样计算盒子的大小方式也发生改变。box-sizing:content-box 盒子大小等于width+padding+bolder;box-sizing:border-box 盒子的大小为width,也就是说设置padding、bolder不会撑开盒子。&lt;!...
复制链接

扫一扫