CSS writing-mode与text-indent文字下沉效果实例页面
回到相关文章 »代码:
CSS代码:
.btn { display: block; color: #a78252; background-color: #ddc390; width: 85px; height: 85px; line-height: 85px; border: 6px solid #ddc390; border-radius: 50%; box-shadow: inset 0 0 0 1px #d6b681, 0 1px, 0 2px, 0 3px, 0 4px; text-align: center; -webkit-transition: border-color .25s, background-color .25s; transition: border-color .25s, background-color .25s; font-size: 42px; cursor: pointer; } .btn:active { text-indent: 2px; } .verticle-mode { writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; *writing-mode: tb-rl; }
HTML代码:
<p>恭喜你中了88元红包!</p> <a href="javascript:" class="btn verticle-mode">领</a>
效果:
恭喜你中了88元红包!
领