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

川长思鸟来 2024-04-18 09:23 33阅读 0赞

.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 做以下布局：

![20190918112727160.png][]

标题居中显示，右上角是关闭的小按钮。这时候可以在左上角度设置一个与右上角小按钮同宽同高的 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 可以设置从下往上，从右往左排列的方法。

--------------------

占满屏幕

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

**`filter 滤镜`**

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

[https://www.cnblogs.com/coco1s/p/7519460.html][https_www.cnblogs.com_coco1s_p_7519460.html]

fixed水平垂直居中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

[20190918112727160.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4f7fbbae20bc435c956718e81448381a.png
[https_www.cnblogs.com_coco1s_p_7519460.html]: https://www.cnblogs.com/coco1s/p/7519460.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/15f5e3d6336248f79b1c11da542ea8fb.png