CSS writing-mode与text-indent文字下沉实例页面
展示
恭喜你中了88元红包!
领代码
-
HTML:
<p>恭喜你中了88元红包!</p> <a href="javascript:" class="btn verticle-mode">领</a>
-
CSS:
.btn { display: inline-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; }