首页 > 代码库 > 采用css3的语言框效果
采用css3的语言框效果
<!doctype html><html><head><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><!--[if lte IE 8]><style type="text/css">/* 对ie实行人道处置 */.cor{ width:0;height:0;bottom:-30px;overflow:hidden;background:transparent; border:20px solid transparent; border-top-color:#BDCEEF; border-left-color:#BDCEEF;}</style><![endif]--></head><body><div class=‘wrap‘> <div class=‘bd‘></div> <div class="cor"></div> <div class="cor cor_s"></div></div></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。