text-shadow，background-origin，background-size，background-clip

133 阅读 0 评论 88 点赞

我是靠谱客的博主震动高山，这篇文章主要介绍text-shadow，background-origin，background-size，background-clip，现在分享给大家，希望可以做个参考。

1.text-shadow可以用来设置文本的阴影效果。
语法：
text-shadow:x-offset y-offset blur color;

X-offset:标示阴影的水平偏移距离，其值为正值时阴影想右偏移，反之像左偏移;

Y-offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移;

Blur:是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；

Color：是指阴影的颜色，其可以使用rgba色。

如：
text-shadow:0 1px 1px #fff;

<style type="text/css">
.demo {
    width: 340px;
    padding: 30px;
    font: bold 55px/100% "微软雅黑";
    background: #C5DFF8;
    text-shadow: 2px 2px 0 red;
}
</style>

<div class="demo">IMOOC</div>

2.background-origin设置元素背景图片的原起始位置。

background-origin:border-box|padding-box|content-box;
参数分别表示背景图片是从边框，还是内边框(默认值)，或者是内容区域开始显示。
需要注意的是，如果背景不是no-repeat,这个属性无效，它会从边框开始显示。

background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;

3.background-clip用来将背景图片做适当的裁剪以适应实际需要。
语法：
background-clip:border-box|padding-box|content-box|no-clip
参数分别表示从边框,或内填充，或内容区域，向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。
background-clip默认值为border-box.

4.background-size设置背景图片的大小，以长度值或百分比显示，还可以通过，cover和contain来对图片进行伸缩。
语法：

background-size:auto|<长度值>|<百分比>|cover|contain
取值说明：
1.auto:默认值，不改变背景图片的原始高度和宽度；
2.<长度值>：成对出现如200px,50px,强背景图片宽度依次设置为前面俩个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3.<百分比>：0%-100%之间的任何值，将背景图片宽高依次设置为所在元素宽高乘前面百分比得出的数值，当设置一个值时同上；
4.cover:顾名思义为覆盖，即将背景图片等比缩放一填满整个容器；
5.contain:容纳，即将背景图片等比缩放放置在一边紧贴容器边缘为止。