CSS为图片添加蒙版 添加placeholder占位 【文字超出...占位】【设置渐变边框】【不显示滚动条】【flex布局】

.scan-card {
  animation: cancel 0.2s linear;
}
.scan-card:hover {  
  animation: hover 0.2s linear;
  animation-fill-mode: forwards;
}

@-webkit-keyframes hover {
  from {
    transform: none !important;
    box-shadow: @shadow-card;
  }
  to {
    transform: translateY(-2px);
    box-shadow: @shadow-card-hover;
  }
}

@-webkit-keyframes cancel {
  from {
    transform: translateY(-2px);
    box-shadow: @shadow-card-hover;
    background-color: darken(@primary, @pi-darken-percentage-1);
  }
  to {
    transform: none !important;
    box-shadow: @shadow-card;
    background-color: @primary;
  }
}

降低一定数值的颜色亮度：darken()。这是常用的 less 颜色操作函数之一。

---

 

之前一直都是用absolute定位，然后:hover 添加

今天想到可以把背景颜色设置为底色一样的颜色，然后:hover的时候变色；同时，设置图片:hover 时候透明度小于1

---

用 flexLayout 做以下布局：

 

标题居中显示，右上角是关闭的小按钮。这时候可以在左上角度设置一个与右上角小按钮同宽同高的 div ，这样可以 <div fxLayout="row" fxLayoutAlign="space-between"> ，使得居中。

之前是用 absolute 把右上角定位，这样不太好，要避免使用 absolute。

---

  .container{
    display: inline-block;
    vertical-align:middle;
    width:120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
 }

 当文字长度超出 120px 时，超出的部分以 ... 代替。

---

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 1px, 1px 10px;
}

 

---

.study-card-box-ready {
  box-shadow: 0 0 0 4px red, 0 3px 6px blue;
}

现有一个红色边框的 div，边框定义如上，设置第一层阴影颜色同样为红色。这样就有了内边距为 4px 的蓝色实现阴影效果。扩展：任意内边距的外边框。

 

---

 CSS 设置不显示滚动条

.temporary-height-fixed::-webkit-scrollbar {
  width: 0;
}

.temporary-height-fixed {
  height: 320px;
  overflow: auto;
  border: 1px solid @base;
}

---

flex 可以设置从下往上，从右往左排列的方法。 

<div dir="ltr">

</div>

<div dir="ltr">

</div>

---

占满屏幕

.main {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

filter 滤镜

 CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

https://www.cnblogs.com/coco1s/p/7519460.html

 

fixed水平垂直居中