大佬教程收集整理的这篇文章主要介绍了有可能用CSS3制作尖锐的按钮(苹果喜欢)?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
可能吗?怎么样?
你可以看到我的目标here:
我写了“限制”,因为这些按钮必须使用固体背景颜色,以便跨浏览器进行渲染.此外,盒子阴影并没有完全延伸到“点”,而是谨慎使用它可能不会令人反感. Box-shadow是可选的,因为它不支持旧的IE,除非增加了像CSS3Pie这样的东西.
.wiz-buttons > a { position: relative; display: block; font: normal 14px Arial; text-decoration: none; cursor: pointer; } .wiz-buttons > a > .button { min-width: 75px; } /* Next Button */ .wiz-buttons > .next { color: #FFF; } .wiz-buttons > .next > .arrow-inner { display: block; position: absolute; top: 1px; right: 3px; z-index: 2000; width: 0; height: 0; border: 14px solid transparent; border-left-color: #E38A13; } .wiz-buttons > .next > .arrow { display: block; float: right; width: 0; height: 0; border: 15px solid transparent; border-left-color: #CC790B; } .wiz-buttons > .next > .button { display: block; float: right; line-height: 20px; BACkground-color: #E38A13; border: 2px solid #CC790B; border-right: 0; padding: 3px 3px 3px 9px; text-align: center; -webkit-border-radius: 2px 0 0 2px; -moz-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; filter: progid: DXImageTransform.Microsoft.gradient(enabled=falsE); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,0.2),0 1px 2px rgba(0,0.05); -moz-box-shadow: inset 0 1px 0 rgba(255,0.05); box-shadow: inset 0 1px 0 rgba(255,0.05); } .wiz-buttons > .next:hover > .arrow { border-left-color: #ad6608; } .wiz-buttons > .next:hover > .arrow-inner { border-left-color: #CC790B; } .wiz-buttons > .next:hover > .button { BACkground-color: #CC790B; border-color: #b66c09; } /* Previous Button */ .wiz-buttons > .previous { color: #666; } .wiz-buttons > .previous > .arrow-inner { display: block; position: absolute; top: 1px; left: 3px; z-index: 2000; width: 0; height: 0; border: 14px solid transparent; border-right-color: #f4f4f4; } .wiz-buttons > .previous > .arrow { display: block; float: left; width: 0; height: 0; border: 15px solid transparent; border-right-color: #e8e8e8; } .wiz-buttons > .previous > .button { display: block; float: left; line-height: 20px; BACkground-color: #f6f6f6; border: 2px solid #eaeaea; border-left: 0; padding: 3px 9px 3px 3px; text-align: center; -webkit-border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; filter: progid: DXImageTransform.Microsoft.gradient(enabled=falsE); -webkit-box-shadow: inset 0 1px 0 rgba(255,0.05); } .wiz-buttons > .previous:hover > .arrow { border-right-color: #e1e1e1; } .wiz-buttons > .previous:hover > .arrow-inner { border-right-color: #eaeaea; } .wiz-buttons > .previous:hover > .button { BACkground-color: #eaeaea; border-color: #e3e3e3; }
<div class="wiz-buttons"> <a class="previous" href="#"> <span class="arrow"></span> <span class="arrow-inner"></span> <span class="button">Previous</span> </a> <a class="next" href="#"> <span class="arrow"></span> <span class="arrow-inner"></span> <span class="button">Next</span> </a> </div>
我希望有人觉得这很有用.
以上是大佬教程为你收集整理的有可能用CSS3制作尖锐的按钮(苹果喜欢)?全部内容,希望文章能够帮你解决有可能用CSS3制作尖锐的按钮(苹果喜欢)?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。