CSS技巧精粹-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45208029/article/details/125008434

1.给盒子设置上下阴影

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    div {
      width: 300px;
      height: 100px;
      background-color: yellow;
      box-shadow: 0px 15px 10px -4px rgba(0, 0, 0, .2), 0px -15px 10px -4px rgba(0, 0, 0, .2);
      margin: auto;
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

2.设置单行超出宽度隐藏

<p style='line-height:50px; 
white-space:nowrap; 
overflow:hidden; 
text-overflow:ellipsis;' 
title='${item.approvalOpinion}'>
${item.approvalOpinion}
</p>

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;//控制行数
overflow:hidden;
height: 32px; //高度是行高的两倍
line-height: 16px;

下边是一行超出显示省略号

white-space:nowrap;/*规定段落中的文本不进行换行*/
overflow:hidden;/*内容会被修剪，并且其余内容是不可见的。*/
text-overflow:ellipsis;/*显示省略号来代表被修剪的文本*/

3.css设置字间距后居中

span {
                        color: #fff;
                        letter-spacing: 28px;
                        text-indent: 28px;
                    }

4.placeholder样式

::-webkit-input-placeholder { /* WebKit browsers */
            color: red !important;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: red !important;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19  */
            color: red !important;
        }
        :-ms-input-placeholder { /* Internet Explorer 10  */
        }