前端开发常用css样式

Posted 2023-02-03 臭小子帅

超出显示三点

	overflow: hidden;    
    text-overflow:ellipsis;    
    white-space: nowrap;

鼠标变为手

cursor:pointer; 

超出换行

overflow: hidden;
word-break: revert;
height: 56px;

字符间距

letter-spacing:2px

字体缩放

transform: scale(0.9);

纯数字或者英文不换行

word-break:break-all
word-wrap:break-word

标签选中总是会有一个黄色的框

outline-color: transparent;

字体渐变色

 background: linear-gradient(to right, #F6E8D4, #E6C09B);
 -webkit-background-clip: text;
 color: transparent;

更改input的placeholder颜色

input::-webkit-input-placeholder
color:#333333;

input::-moz-placeholder /* Mozilla Firefox 19+ */
color:#333333;

input:-moz-placeholder /* Mozilla Firefox 4 to 18 */
color:#333333;

input:-ms-input-placeholder /* Internet Explorer 10-11 */
color:#333333;

去除滚动条保留滚动效果

.element::-webkit-scrollbar  width: 0 !important 

弹性盒子横向滚动

横向多个子元素不换行显示，出现滚动条

//父元素
display: flex;
overflow-x: auto;

//子元素
flex: none;