css自适应 未知宽度div居中 溢出显示...等常用样式渲染

css自适应：https://blog.csdn.net/qq_17518593/article/details/52689178

div未知宽度居中：https://blog.csdn.net/rongku/article/details/40452231

    display: flex;
    align-items: center;
    justify-content: center;

 

Addby 2020-5-28

溢出部分使用...进行超出宽度的隐藏

 

　　　　　　　　/*单行溢出显示...*/
            overflow: hidden;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            /* 多行溢出显示... */ 
            display: -webkit-box;  /* 在父元素上设置该属性，子代元素能排列在同一水平上。  */
            -webkit-box-orient: vertical;  /* 设置或检索伸缩盒对象的子元素的排列方式 。 */
            -webkit-line-clamp: 3;  /* 可见行数。 */
            text-overflow: ellipsis;
            overflow: hidden;

 

 

 

 Endby 2020-5-28

AddBy 2020-09-09

IE中数据框去除×符号

 

::-ms-clear, ::-ms-reveal{
    display:none;
}

EndBy 2020-09-09

AddBy 2020-09-13

关于css样式中textarea自动换行差异：(同步于 2.关于css样式中textarea自动换行差异)

word-break:break-all;  /* 非IE下textarea自动换成*/
word-wrap : break-word;  /* 非IE下textarea自动换成*/

EndBy 2020-09-13

 

AddBy 2021-04-23

自动换行

 

    word-wrap:break-word;
    word-break:normal; 

 

 

EndBy 2021-04-23

 

AddBy 2023-06-15 09:40:29

input光标上下不居中的问题

参照做笔记来源：input输入框中的光标上下不居中的解决方法

 

input{
            width: 520px;
            height: 50px;
            line-height: 50px;  // 删除input即可 FF：该行有文字时，光标高度与font-size一致。该行无文字时，光标高度与input的height一致。  Chrome：该行无文字时，光标高度与line-height一致；该行有文字时，光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候)，如果没有line-height，则是与font-size一致。
            font-size: 16px;
        }

 

EndBy 2023-06-15

 

AddBy 2023-06-26

添加渐变背景色样式案例

 

transition: box-shadow 0.8s linear;
box-shadow: inset 0 -100px #84cf6d;

 

EndBy 2023-06-26

 

AddBy 2023-07-03

input输入状态显示背景框

 

        input{
            outline: none;
        }

 

 

 

EndBy 2023-07-03

 

 

AddBy 2023-12-08

CSS中图片模糊处理(高斯模糊处理)

    filter: blur(2px);

 

EndBy 2023-12-08