css3-背景、阴影、盒模型

本文目录

• 1.背景缩放
• 2.文字阴影
• 3.CSS3盒模型

1.背景缩放

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
（a）可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
（b）设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
（c）设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

移动端为了保持图片的高清，一些图片（尤其是精灵图），会按照实际尺寸的两倍大小制作。
此时通过background-size：某个具体的值（宽度的一半，此时只写一个值，那么另外一个值默认为auto），将精灵图缩小一半，然后background里面的位置也要重新定义。（将精灵图在PS中缩小一半）

2.文字阴影

在css3中我们可以给我们的文字添加阴影效果了

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

前两项是必须写的。 后两项可以选写。

body {
    background-color: #ccc;
}
div {
    color: #ccc;
    font: 700 80px "微软雅黑";
}
.up {
    /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
.down {
    /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

<div class="up">我是凸起的文字</div>
<div class="down">我是凹下的文字</div>

效果示意图如下：

效果图.png

3.CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1、内加模式：box-sizing: content-box content-box:此值为其默认值，其让元素维持W3C的标准Box Mode，内加模式就是W3C盒模型（标准盒模型）

• width = content
• 一个块的宽度 = width + padding + border + margin

2、内减模式：box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的，內减模式也叫做IE盒模型（怪异盒模型）

• width = border + padding + content
• 一个块的宽度 = width + margin

同样还是刚才两个div，我们给设置上相同的width，height，border，padding，但是设置不同的box-sizing，up盒子的宽高已经被撑开到了px，down盒子依旧保持200px的宽高。

.up{
    width: 200px;
    height: 200px;
    background-color: pink;
    box-sizing: content-box;
    /*  就是以前的标准盒模型  w3c */
    padding: 10px;
    border: 15px solid red;
    /* 盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
}
.down {
    width: 200px;
    height: 200px;
    background-color: purple;
    padding: 10px;
    box-sizing: border-box;
    /* padding border  不撑开盒子 */
    border: 15px solid red;
    /* margin: 10px; */
    /* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
}