Coding-everyday

# 1. input的autofill不能用rgba模式；加上transition看不到圆角处的白边

关键：用box-shadow模拟

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover{
  -webkit-box-shadow: 0 0 0 1000px #191d2d inset !important;
     -moz-box-shadow: 0 0 0 1000px #191d2d inset !important;
          box-shadow: 0 0 0 1000px #191d2d inset !important;

 -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important; /*光标颜色*/
  
  border: 1px solid #2e3243 !important;
  transition: background-color 50000s ease-in-out 0s;
}

# 2. 移动端强制横屏显示

通过竖屏时旋转解决横屏问题

@media screen and (orientation: portrait){
  #wrapper {
    -webkit-transform:rotate(90deg);
    -webkit-transform-origin:0% 0%;/*1.重置旋转中心*/
    
    -moz-transform: rotate(90deg);
    -moz-transform-origin:0% 0%;
      
    -ms-transform: rotate(90deg);
    -ms-transform-origin:0% 0%;
    
    transform: rotate(90deg);
    transform-origin:0% 0%;
    
    width: 100vh;/*2.利用 vh 重置 '宽度' */
    height: 100vw;/* 3.利用 vw 重置 '高度' */
    
    top: 0;
    left: 100vw;/* 4.旋转后页面超出屏幕，重置页面定位位置 */
  }
}

注意，transform: rotate(90deg)默认旋转中心为 x，y 的 50% 50%

# 3. 警报闪烁CSS

@keyframes scaleout{
 0%{
  /*transform: scale(1.0);*/
  /*display: none;*/
  opacity: 1.0;
 }
 50%{
  opacity: 0.0;
 }
 100%{
  opacity: 1.0;
 }
}

.alarm{
  background: red !important;
  animation: scaleout 0.5s infinite ease-in-out;
 }

# 4. 单行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;

# 5. 多行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

# 6. 如何设置选中文字的背景颜色？

::selection{
  background-color: #b3d4fc;
  text-shadow: none;
}

# 7. 如何排除第一个li元素？

li + li {  
  border-left: 1px solid #ddd; 
}

# 8. CSS改变input光标颜色

这种效果有两种实现方式：

  1. 使用color来实现 光标的颜色是继承自当前输入框字体的颜色，所以用color属性即可改变：
input{
  color:red;
}
  1. 使用caret-color来实现 上一种方式已经修改了光标的颜色但是字体的颜色也改变了，如果只想改变光标的颜色而不改变字体的颜色那就使用caret-color属性:
input{
  caret-color:red;
}

# 9. 唱片旋转CSS

  1. animation: linear infinite

  2. keyframes中0%时transform:rotate(0deg)，100%时 360deg

JS控制唱片暂停时，如果用 this.setAttribute('class', 'play') 会跳到初始位置，可以用this.style.annimationPalyState(webkitAni…) = 'running' 或者'paused'

# 10. background-size

background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
background-size ：100px 100px; // 调整图片到指定大小；
background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。

常见用法： background-size: cover与background-position: 50% 50%配合，保证背景图片居中

# 11. input的placeholder样式：

input::-webkit-input-placeholder不能和moz、ms连起来写，需要分开

# 12. calc()注意事项

calc(50% - 470px)，中间必须加空格

# 13. 如何去掉 antd 的 Input 组件获取焦点时的蓝色边框

最初尝试通过设置outline:none的方法去掉这个边框，但是发现这个方法不起作用。

其实，antd的Input组件在获取焦点情况下的蓝色边框是通过box-shadow来实现的。

← 伪类_伪元素 →