学习记录_0916

最新推荐文章于 2025-03-18 17:08:04 发布

原创最新推荐文章于 2025-03-18 17:08:04 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

常用的css

https://juejin.im/post/6869659680496041991

一、设置 input 的 placeholder的字体样式

input::-webkit-input-placeholder {     /* chrome/opera/safari */
	color:red
}
input::-moz-placeholder {         /* firefox 19+ */
	color:red
}
input:-moz-placeholder {         /* firefox 18- */
	color:red
}
input:-ms-input-placeholder {       /* ie10+ */
	color:red
}

input 聚焦时样式

input:focus {
	background-color: red
}

取消 input 边框

border:none;
outline:none

二、滚动条样式

/* 宽高分别对应横竖滚动条的尺寸 */
::-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-scroll-thumb {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3)
	background-color:#E8E8E8
	border-radius:7px
}

/* 定义两端按钮的样式 */
::-webkit-scrollbar-button {
	background-color:cyan
}

/* 定义右下角汇合的样式 */
::-webkit-scroll-corner {
	background:khaki
}

三、文字超出隐藏并显示省略号

/* 单行 */
width:200px
white-space:nowrap
overflow:hidden
text-overflow:ellipsis
/* 多行 */
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden

四、控制div内的元素自动换行

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

五、三角形

#demo {
	width: 0;
	height: 0;
	border-width: 20px;
	border-style: solid;
	border-color: transparent transparent red transparent
}

六、绝对元素居中（水平垂直居中）

#demo {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background-color: green
}