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:容纳,即将背景图片等比缩放放置在一边紧贴容器边缘为止。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值