0%
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| 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;
|
二、隐藏滚动条或更改滚动条样式
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, 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, 0.3); background-color: #e8e8e8; }
::-webkit-scrollbar-button { background-color: cyan; }
::-webkit-scrollbar-corner { background: khaki; }
|
三、文字超出隐藏并显示省略号
单行(一定要有宽度)
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; -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 5 6 7 8 9
| table, tr, td { border: 1px solid #333; }
table { border-collapse: collapse; }
|