收集了一些我平时经常要用到的但又总是记不住的样式。有错漏的地方欢迎与我交流。
1 2 3 4 5 6 7 8 9 10 11 12
| input::-webkit-input-placeholder { color: red; } input::-moz-placeholder { color: red; } input:-ms-input-placeholder { color: red; } input:-moz-placeholder { color: red; }
|
1 2 3
| input:focus { background-color: red; }
|
1 2
| border: none; outline: none;
|
二、隐藏滚动条或更改滚动条样式
注意这几个名词,你就可以自由设置滚动条样式了:
- scroll-track——滚动条轨道
- scrollbar-thumb——滚动条滑块
- scrollbar-button——滚动条按钮
- scrollbar-corner——滚动角
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| ::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: rosybrown; border-radius: 3px; }
::-webkit-scrollbar-thumb{ border-radius: 7px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #E8E8E8; }
::-webkit-scrollbar-button { background-color:cyan; }
::-webkit-scrollbar-corner { background:khaki; }
|
三、文字超出隐藏并显示省略号
大家要注意这几个属性:
- white-space————处理元素空白,常用值有:nowrap不换行,其他还有pre-line、pre-wrap等,大家可以自己尝试。
- word-break——在合适的点断行。常用值有break-all可以在单词内换行,keep-all只能在半角空格或连字符处换行。我们需要超出盒子部分就换行,所以用break-all。
- box-orient——子元素如何排列。值有vertical和horizontal,分别是垂直排列和水平排列。
- line-clamp——控制文本行数。
单行(一定要有宽度)
1 2 3 4
| width:200rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
多行
1 2 3 4 5
| word-break: break-all; display: -webkit-box; // 自适应布局 -webkit-line-clamp: 2; // 文本行数最多2行 -webkit-box-orient: vertical; // 子元素垂直排列 overflow: hidden; // 超出部分隐藏
|
四、控制div内的元素自动换行
1 2
| word-wrap: break-word; // 允许长单词换行到下一行 word-break:break-all; // 在哪儿换行都行,在单词内换行都行
|
五、 纯css画三角形
1 2 3 4 5 6 7
| #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }
|
六、 绝对定位元素居中(水平和垂直方向)
1 2 3 4 5 6 7 8 9
| #demo { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: green; }
|
七、表格边框合并
1 2 3 4
| table,tr,td{border: 1px solid #333;} table{ border-collapse: collapse; }
|