常用样式记录

/*内阴影*/
.wrap-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999999;
    pointer-events: none;  /*没有鼠标事件*/
    box-shadow: 10px 10px 20px 20px rgba(0,0,0,0.2) inset,-10px -10px 20px 20px rgba(0,0,0,0.2) inset;
    /* 内部阴影，并且顶部不设阴影 */
    /*  
      box-shadow: 20px 0 30px 0 rgba(0,0,0,0.5) inset,-20px -20px 30px 0 rgba(0,0,0,0.5) inset;
    */
}

/* 设置文字不换行，超过的部分用“...”代替 */
.top-right .content .time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 210px;
}
/*强制换行， 参考：https://www.cnblogs.com/sensualgirl/p/3712332.html
主要就是用到了 
方式1. word-wrap: break-word  按单词换行
方式2. word-break: break-all   按宽度截断换行
*/

/*媒体查询的写法*/
@media screen and (max-width: 1200px) {
    .top-right .content .time {
        display: none;
    }
}
/* font-face使用 */
@font-face
{
    font-family: 'title-font';
    src: url('fonts/hanyi.TTF')
}
.top-center>h1 {
    text-align: center;
    font-size: 28px;
    color: #fff;
    padding-top: 20px;
    white-space: nowrap;   /* 不换行 */
    font-family: 'title-font';   /*使用上面定义的字体*/
    letter-spacing:3px;    /*文字间距*/
}

滚动条样式： https://www.cnblogs.com/vicky-li/p/css.html
/*
 *  STYLE 8
 */

.room-list::-webkit-scrollbar-track
{
    /* border: 1px solid black; */
    background-color: rgba(20,111,204,0.6);
}

.room-list::-webkit-scrollbar
{
    width: 10px;
    height: 10px;
    background-color: #F5F5F5;
}

.room-list::-webkit-scrollbar-thumb
{
    background-color: rgba(20,111,204,1);
}
::-webkit-scrollbar-button{display:none}

/*隐藏滚动条样式-移动端下用的较多*/
::-webkit-scrollbar{  
  height: 0;
  width: 0;
  color: transparent;
}

/*用户不可选中样式*/
user-select: none
:focus:none;
/*阴影*/
box-shadow:0 0 8px rgba(0,0,0,.2)
/*伪类三角型*/
#navbar-search-tips:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-bottom-color: #fff;
    left: 20px;
    bottom: 99%;
}

/*利用伪类做像素边框三角形*/
.mappopup:before{
    content:'';
    display: block;
    width:0;
    height: 0;
    border:10px solid rgba(2,155,255,1);
    border-color:rgba(2,155,255,1) transparent transparent transparent;
    position: absolute;
    left:22px;
    bottom:-20px;
}
.mappopup:after{
    content:'';
    display: block;
    width:0;
    height: 0;
    border:8px solid rgba(255,255,255,1);
    border-color:rgba(255,255,255,1) transparent transparent transparent;
    position: absolute;
    left:24px;
    bottom:-16px;
}

/*滚动条样式*/
.p-box{
    padding:10px 0 30px 10px;
    height: 100%;   
    overflow: auto;
    box-sizing: border-box; 
}
.p-box::-webkit-scrollbar {
    width: 8px;     
    height: 8px;        
}
.p-box::-webkit-scrollbar-thumb {
    /* border-radius: 10px; */
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background-color: rgba(195,200,204,1);  
}
.p-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    /* border-radius: 10px; */
    background: rgba(228,228,228,1);
}

/*利用flex布局，使不规则图片左右、上下都居中显示*/
.pic-box{
    height: 80%;
    position: absolute;
    right:2px;
    top:10%;
    z-index: 0;
    width: 50px;
    background: #eee;
    display:flex;
    align-items: center;
    justify-content: center;
}
.pic-box>img{
    max-width: 100%;
    max-height: 100%;
}

/*强制不换行 */
p { white-space:nowrap; } 

/*自动换行 */
p { word-wrap:break-word; word-break:normal; } 

/*强制英文单词断行 */
p { word-break:break-all; } 

/*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。*/
span { display:block; }

效果：

image.png