HTML5页面开发中自己实现“阴影”和“透明背景”和 “圆角” 的代码分享 更新:v1.0.1

你前男友 发布于 2016/11/28 13:05
阅读 561
收藏 0
so,目前有些开发者在使用WeX5制作页面开发的时候可能会想到  阴影  跟  透明背景 ,那么怎么实现呢?
我们都知道页面都是由html组成的,那么阴影在html的css样式是否有  阴影  跟  透明背景  呢?答案是肯定的。
不管在style属性还是css命名属性里,都是可以设置的;那么阴影有两种,一种是块阴影,另一种就是文字阴影;

接下来我将代码分享出来给各位;

以下先讲阴影:

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

box-shadow属性的参数设置取值:
阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;
X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;
Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;
阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

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

以下是阴影公用的例子:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.demo{
width: 200px;
height: 200px;
margin: 50px auto;
}
.demo1{
-webkit-box-shadow: 0px 3px 5px rgba(51, 51, 51, .3);/*webkit*/
-moz-box-shadow: 0px 3px 5px rgba(51, 51, 51, .3);/*firefox*/
box-shadow: 0px 3px 5px rgba(51, 51, 51, .3);/*opera或ie9*/
}
.demo2{
-webkit-box-shadow: inset 0px 0px 5px 3px rgba(51, 51, 51, .5);/*webkit*/
-moz-box-shadow: inset 0px 0px 5px 3px rgba(51, 51, 51, .5);/*firefox*/
box-shadow: inset 0px 0px 5px 3px rgba(51, 51, 51, .5);/*opera或ie9*/
}
</style>
</head>
<body>
<div class="demo demo1"></div>
<div class="demo demo2"></div>
</body>
</html>



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

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




以下为块内阴影的例子:

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



以上有外阴影 跟 内阴影两个例子,效果分别为下图:


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


以下是讲文字阴影

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

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

如图所示:



以下是文字阴影公用的例子:

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.demo{
			background: #666;
			width: 300px;
			padding: 20px;
			font: bold 32px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;
			color: #FFF;
			text-align: center;
			margin: 50px auto;
		}
		.demo1{
			text-shadow: 1px 2px 3px red;
		}
		.demo2{
			text-shadow: 0px 0px 20px red;
		}
		.demo3{
			text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
		}
		.demo4{
			color: #000;
			text-shadow: 0 1px 1px #fff;
		}
		.demo3D{
			color: #fff;
			text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);
		}
	</style>
</head>
<body>
	<div class="demo demo1">Hello World</div>
	<div class="demo demo2">Hello OsChina</div>
	<div class="demo demo3">Hello Witch</div>
	<div class="demo demo4">End</div>
	<div class="demo demo3D">3D TEXT EFFECT</div>
</body>
</html>



实际效果如下图:


文字阴影具体可参考:http://www.w3cplus.com/blog/52.html


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

.demo{box-shadow: 0px 2px 3px rgba(51, 51, 51, .3), 2px 4px 5px rgba(51, 51, 51, .5);}
.demo{text-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+;

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

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



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



/* 更新 v1.0.1 */

圆角元素:

基本语法{border-radius: 左上圆角, 右上圆角, 右下圆角, 左下圆角;}

{border-radius: 左上右下, 右上左下;}

{border-top-left-radius: 左上圆角;}

{border-top-right-radius: 右上圆角;}

{border-bottom-right-radius: 右下圆角;}

{border-bottom-left-radius: 左下圆角;}

圆角属性的参数设置取值:

无论圆角任何一个参数都不能为负值,必须为正值,如px 或者 % 或者 em rem等单位。

以下为圆角公用例子:

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.radius-demo{
		background: #666;
		width: 300px;
		padding: 20px;
		font: bold 32px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;
		color: #FFF;
		text-align: center;
		margin: 20px auto;
	}
	.demo1{
		border-radius: 15px 0 0 0;
	}
	.demo2{
		border-radius: 0 15px 0 0;
	}
	.demo3{
		border-radius: 0 0 15px 0;
	}
	.demo4{
		border-radius: 0 0 0 15px;
	}
	.demo5{
		border-radius: 15px 15px 15px 15px;
	}
	.demo6{
		border-radius: 100%;
		width: 100px;
		height: 100px;
		line-height: 100px;
		font-size: 16px;
	}
	</style>
</head>
<body>
	<div class="radius-demo demo1">我左上角圆了</div>
	<div class="radius-demo demo2">我右上角圆了</div>
	<div class="radius-demo demo3">我右下角圆了</div>
	<div class="radius-demo demo4">我左下角圆了</div>
	<div class="radius-demo demo5">我四个角都圆了</div>
	<div class="radius-demo demo6">吓的我变圆了~</div>
</body>
</html>



demo示例如下图:


有的人可能会问,以上元素在WeX5打包之后在手机里查看app是否有效果呢?那么答案肯定是能看到的,现在大多数主流的手机系统都能支持。(如有不对,欢迎指出)

/* 更新 v1.0.1 */


加载中
返回顶部
顶部