css左侧投影_css3投影讲解、投影

迷茫了好一段时间,今天开始整理一下自己,同时也整理下新的知识。

CSS3:

从头开始做起:现在在页面中用到最多的是图片/容器投影,文字投影;

接下来就总结一个投影问题:

box-shadow:阴影类型 x轴位移 y轴位移 阴影大小 阴影扩展 阴影颜色

一般这样写   box-shadow:1px 1px 5px #000; 有4个值 分别指 水平方向偏移、垂直方向偏移、阴影羽化、投影颜色;

.box1{width:500px;height:400px;background:#7f0101;box-shadow:10px 10px 5px #500606;box-shadow:inset 1px 1px 3px #f56a6a;}

在谷歌上浏览的:

如果是内阴影  box-shadow:inset1px 1px 5px #000;

如果想要内发光,那么更简单了,就让背景底色深一些,投影浅一些。

文字也是同理 text-shadow:1px 1px 5px #000;

文字投影

.tit{font-size: 50px;maring-top:20px;text-shadow:5px 5px 4px #000;}

空心文字的效果,想必大家已经想到了吧:

.tit{font-size: 50px;maring-top:20px;text-shadow:0px 1px 0px #000;text-shadow:0 1px #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;

color:#fff;}

阴影可以重复叠加的 如:box-shadow:-2px 0 5px green,0 -2px 5px blue,0 2px 5px red,2px 0 5px yellow;

ie是最让人闹心啦,所以针对ie9一下,可以通过使用滤镜来兼容。

filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值), Strength=阴影半径(数值));

该滤镜需要配合banckground一起使用,否则便会失效。不过,除了滤镜的方法,还可以使用jquery来实现:

$(document).ready(function(){

if($.browser.msie) {

$('.box1').boxShadow(0,0,5,"#888"); //box1元素使用了box-shadow

$('.box2').boxShadow(-10,-10,5,"#f36"); //box2元素使用了box-shadow{多个元素}

}

});

补充: 浏览器兼容问题: -khtml-  konqueror

-ms-      IE

-moz-     FireFox

-o-         Opera

-webkit-   Safari Chrome

一些css书写规范建议将浏览器私有实现的CSS3属性写在前面标准属性写在后面。如:-webkit-border-radius:30px 10px;

border-radius:30px 10px;

如有不足之处,谢谢指出,希望能够互相学习,(*^__^*) 嘻嘻……

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值