配置: Release Any CPU / div / body / html 二、实现按钮点击文字下沉效果 我们可以
标签：
比来的一个项目中要使文字垂直摆列，也就是运用了CSS的writing-mode属性。
writing-mode最初时ie中撑持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的语法会有区别。
一、CSS3标准 writing-mode:horizontal-tb;//默认：程度标的目的，从上到下 writing-mode:vertical-rl; //垂直标的目的，从右向左 writing-mode:vertical-lr; //垂直标的目的，从左向右<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .textinfo { height: 250px; padding: 10px; border: 1px solid red; writing-mode: vertical-rl; } </style> </head> <body> <div class="textinfo"> 颁布已启动: 项目: QL.Back.API, 配置: Release Any CPU </div> </body> </html>
二、实现按钮点击文字下沉效果
我们可以设置文字的writing-mode，然后在结合text-indent来实现文字点击时的下沉效果；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .btn { width: 50px; height: 50px; line-height: 50px; color: white; text-align: center; font-size: 16px; ; display: inline-block; border-radius: 50%; background: gray; cursor: pointer; } .btn:active { text-indent: 2px; } .vertical-text { writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; *writing-mode: tb-rl; } </style> </head> <body> <span>点击领红包</span> <p class="vertical-text btn">开 </p> </body> </html>
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31873.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")