css常用笔记

关闭选中竖条--

cursor: pointer;
user-select: text;
user-select:none;

letter-spacing: 1px;
line-height: 1.5em;

滚动条设置

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 1px;
  //height: -5px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 0px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #c8c8c8;
}

 

边框----　　border:1px solid #55a532;

空　

 

 

 

 

 

 

单独设置某个边的边框

 

font-weight: bold;
border-bottom:2px #39537d;
border-bottom-style:solid;

 直接定位刀第几个元素

div:nth-child(1)

透明颜色:

color: 'rgba(3,40,56.4)',//拐点颜色

 cursor:pointer;  变成小手

.column {

display: flex;

flex-direction: column;

justify-content: center;//space-around

align-items: center;

flex-flow: wrap ;

}

.row {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

flex-flow: wrap 

}

<el-image :src="require(`@/assets/images/xxx.png`)">

{

background-color: #86bbe4;
background: url("@/assets/images/ovweflwer.png");
background-repeat: no-repeat;
//background-size: 100% 100%;
//height: 100%;
//display: flex;
//flex-direction: column;

}

div里面的文字垂直和水平居中

{

height: 170px;
text-align: center;
line-height: 170px;

}

边框　　border: medium double rgb(250, 0, 255)

 文字超出不换行,显示省略号

{

width: 156px;
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;

}

 

{

}