实现一个特殊单面css框效果的方法-创新互联
这篇文章主要介绍了实现一个特殊单面css框效果的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
在网站建设、网站设计中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手,突出企业的产品/服务/品牌,帮助企业锁定精准用户,提高在线咨询和转化,使成都网站营销成为有效果、有回报的无锡营销推广。创新互联建站专业成都网站建设十多年了,客户满意度97.8%,欢迎成都创新互联客户联系。这是html部分:
Some example text
CSS代码
#beauty-boxes{ transition: all 0.5s ease; position:relative; float:left; width:45%; padding:2px; margin:3px; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0), 0 0 40px rgba(0, 0, 0, 0) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset; -moz-border-radius:4px; border-radius:4px; } #beauty-boxes:before, #beauty-boxes:after { content:""; position:absolute; z-index:-3; bottom:15px; left:12px; width:50%; height:20%; max-width:350px; max-height:90px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } #beauty-boxes:after { right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }.beauty-boxes p { font-size:16px; font-weight:bold; } #beauty-boxes:hover{ background-color:#161616; color:#fff; }
效果如下:
感谢你能够认真阅读完这篇文章,希望小编分享实现一个特殊单面css框效果的方法内容对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站制作公司行业资讯频道,遇到问题就找创新互联建站,详细的解决方法等着你来学习!
网站栏目:实现一个特殊单面css框效果的方法-创新互联
文章路径:http://myzitong.com/article/djeojc.html