分享WeX5还未有的元素

mrxandy

so，目前有些开发者在使用WeX5制作页面开发的时候可能会想到 阴影 跟 透明背景，那么怎么实现呢？
我们都知道页面都是由html组成的，那么阴影在html的css样式是否有 阴影 跟 透明背景 呢？答案是肯定的。
不管在style属性还是css命名属性里，都是可以设置的；那么阴影有两种，一种是块阴影，另一种就是文字阴影；
接下来我将代码分享出来给各位；

以下先讲阴影：

1. 基本语法：{box-shadow: 投射方式 水平偏移 垂直偏移 阴影模糊半径 阴影扩展半径 阴影颜色;}

复制代码

box-shadow属性的参数设置取值：

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。

以下是块的外阴影的例子：

1. .box_shadow{
   
2.   -webkit-box-shadow: 0px 3px 5px #999 或 rgba(51, 51, 51, .3);/*webkit*/
   
3.   -moz-box-shadow: 0px 3px 5px #FFF 或 rgba(51, 51, 51, .3);/*firefox*/
   
4.   box-shadow: 0px 3px 5px #FFF 或 rgba(51, 51, 51, .3);/*opera或ie9*
   
5. }

复制代码

以下为块内阴影的例子：

1. .box_shadow{
   
2. -webkit-box-shadow: inset 0px 0px 5px 3px #999 或 rgba(51, 51, 51, .3);/*webkit*/
   
3. -moz-box-shadow: inset 0px 0px 5px 3px #999 或 rgba(51, 51, 51, .3);/*firefox*/
   
4. box-shadow: inset 0px 0px 5px 3px #999 或 rgba(51, 51, 51, .3);/*opera或ie9*/
   
5. }

复制代码

块阴影具体可参考：http://blog.csdn.net/freshlover/article/details/7610269


以下是讲文字阴影

1. 文字阴影基本语法：{text-shadow: [颜色(Color), 水平(x offset) 垂直(y offset), 半径模糊(Blur)] 或者 [水平(x offset), 垂直(y offset), 半径模糊(Blur), 颜色(Color)];}

复制代码

那么取值就是：
<水平/垂直>：长度值，可以为负值。用来指定阴影的位置，其中X offset是水平偏移值(正值的时候偏向右边，负值的时候偏向左边)，Y offset是垂直偏移值(正值的时候偏向下面，负值的时候偏向上面);
<半径模糊>：阴影的模糊值，不能是负值，用来指定模糊效果的作用;
<颜色>：指定阴影颜色，可为 #999 或 rgba透明色

以上阴影不管块阴影还是文字阴影，不管是一组还是多组都支持以英文逗号隔开，例如：

1. {box-shadow: 0px 2px 3px rgba(51, 51, 51, .3), 2px 4px 5px rgba(51, 51, 51, .5);}

复制代码

块的阴影浏览器支持：Ie9  火狐3.5  Safari 4  Opera 10.6  谷歌 2.0;
文字的阴影浏览器支持：火狐3.5  Safari 3.0  Opera 9.5+  谷歌 4.0+;

最后就剩下透明背景，透明背景有两种，一种是背景透明了那么文字也会跟着半透明，第二种是背景透明文字还是实体不跟着背景而透明;
第一种的写法：

1. .transparent{
   
2. opacity: 0.5;/*为正值也就是 1以上就是实体透明背景*/
   
3. filter: alpha(opacity=50);/*这个就是给头疼的ie用的*/
   
4. }

复制代码

第二种的写法：

1. .transparent{background: rgba(51, 51, 51, .3);/*对的就这么简单，使用background的rgba即可实现第二种效果*/}

复制代码

好了就暂时先讲这两个，后期有发现再继续更新该帖子！

摩羯座

写的非常有用呀，请问怎么收藏帖子

mrxandy

摩羯座 发表于 2016-11-28 08:19
写的非常有用呀，请问怎么收藏帖子

谢谢支持，在我写的内容正中间下面就有一个收藏按钮。