css3实现人性化的语言提示框效果

2024-09-05 12:18:48

字体：大中小

来源：转载

供稿：网友

CSS3兼容性是个大问题，期待IE早日升级啊，这么漂亮的效果竟然IE8不支持。CSS代码里有一句ie的滤镜注释，那是ie的阴影滤镜。再此提示，transform属性并非css3独有，svg，canvas中也都有实现，当然他们的写法非常类似。代码里还要用到transform中的skew。

<!doctype html><html><head><meta charset='UTF-8' /><title>采用css3的语言框效果</title><style>.wrap{position:relative;}.bd{	background:#BDCEEF;width:250px;height:80px;padding:10px;position:relative;z-index:2;	box-shadow: 5px 8px 11px rgba(0,0,0,0.4); /* 阴影 */	-webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);	-moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);	/*filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=145, Strength=3)*/ 	/* ie的阴影滤镜 */	border-radius: 5px;  /* 圆角 */	-webkit-border-radius: 5px;	-moz-border-radius: 5px;}.cor{	position:absolute;	z-index:2;	width:40px;	height:40px;	background:#BDCEEF;	left:30px;bottom:-20px;	transform: skewY(-45deg); /* 斜切实现尖角  */	-o-transform: skewY(-45deg);	-webkit-transform: skewY(-45deg);	-moz-transform: skewY(-45deg);}.cor_s{	z-index:1;	box-shadow: 5px 8px 11px rgba(0,0,0,0.4);  /* 尖角处的阴影 */	-webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);	-moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);}</style></head><body><div class='wrap'>	<div class='bd'>Hello everybody</div>	<div class="cor"></div>	<div class="cor cor_s"></div></div></body></html>

上一篇：用HTML5的File API做上传图片预览功能

下一篇：CSS3文本框中的占位符演示示例

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注