黄继良

Appearance

On this page

常用CSS收集 ​

input输入框去掉默认的上下箭头 ​

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}

解决图片标签地板空白间距 ​

产生原因：img标签与文本的对齐方式默认是基线，底部空白是基线与底部线之间的距离，留白给文字显示

解决方案：

方案一：设置父元素字体大小为0
.img-parent {font-size: 0;}

方案二：将 img 元素设置为 display: block
img {display: block;}

方案三：将 img 元素设置为 vertical-align: bottom  【推荐】
img {vertical-align: bottom;}

方案四：给父元素设置 line-height，属性值大小是空白间距的高度
.img-container{line-height: 5px;}

设置元素的高度与windows高度一致 ​

.container { height: 100vh; }

修改input placeholder样式 ​

input::-webkit-input-placeholder {
    color: red;
    font-size: 12px;
}

使用caret-color来修改光标的颜色 ​

caret-color: red;

使用:not选择器 ​

li列表除了最后一个元素，所有元素都需要一些样式，可以使用:not选择器非常容易做到

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

绘制小箭头 ​

.box {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  display: inline-block;
  margin-right: 10px;
  width: 0;
  height: 0;
  /* Base Style */
  border: 16px solid;
  border-color: transparent #cddc39 transparent transparent;
  position: relative;
}

.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -16px;
  border: 16px solid;
  border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
  transform: rotate(270deg);
}
/*上*/
.arrow.top {
  transform: rotate(90deg);
}
/*左*/
.arrow.left {
  transform: rotate(180deg);
}
/*右*/
.arrow.right {
  transform: rotate(0deg);
}




<div class="box">
  <div class="box-inner">
    <div class="arrow bottom"></div>
    <div class="arrow top"></div>
    <div class="arrow right"></div>
    <div class="arrow left"></div>
  </div>
</div>

使用 "filter:grayscale(1)"，使页面处于灰色模式。 ​

body{
  filter: grayscale(1);
}

多行文本溢出时显示省略号 ​

选择器 {
  /*1. 超出的部分隐藏 */
  overflow: hidden;
  /*2. 文字用省略号替代超出的部分 */
  text-overflow: ellipsis;
  /* 3. 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 4. 限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp: 2;
  /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

单行文本溢出时显示省略号 ​

选择器 {
  /*1. 先强制一行内显示文本*/
   white-space: nowrap;  （ 默认 normal 自动换行）
   
  /*2. 超出的部分隐藏*/
   overflow: hidden;
   
  /*3. 文字用省略号替代超出的部分*/
   text-overflow: ellipsis;
}

将一个元素在水平和垂直方向上居中 ​

对行内元素、块元素生效。而对行内块<img /> <input />元素不生效

选择器 {
	display: flex;
	align-items: center;
	justify-content: center;
}

不允许选择文本 ​

p {
  user-select: none;
}

自定义选定的文本样式 ​

p::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

隐藏滚动条 ​

.box-hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

图像适配窗口大小 ​

body {
  padding: 15px;
}
.box{
  background-color: #010102;
  border-radius: 10px;
  overflow: hidden;
}
/* padding */
.img-container {
  width: 100%;
  height: 0;
  /* 根据比例来调控 */
  padding-bottom: 66.620879%;
}
img {
  width: 100%;
}


<div class="box">
	<div class="img-container">
		<img src="./test/1.jpg" alt="">
	</div>
</div>