1 flex-direction 属性
div { display:flex; flex-direction:row-reverse; }
2旋转角度 用于图标来回切换
transform: rotate(180deg);
3背景颜色渐变
linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
4 calc计算 * 减号前后有空格
width: calc(100% - 199px);
5下划线
text-decoration:underline
a:hover{ text-decoration:underline;}
text-decoration下划线
none : 无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
6 background引用图片
width: 150px; height: 140px;
background: url(../../assets/images/log-i1.png) no-repeat;
background-size: 100% 100%;
7 css引用字体
@font-face {
font-family: 'dINCondensedBold';
src: url('../../../assets/fonts/DIN Condensed Bold.ttf');
}
8 深度选择器
::v-deep 或者/deep/
9 CSS 子元素选择器
//规定属于其父元素的第二个 p 元素的每个 p:
p:nth-of-type(2)
{
background:#ff0000;
10 CSS文字不换行,超出部分显示…
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
11修改el-table表头样式
<el-table
:data="tableData"
class="recent-contributions"
:header-cell-style="{background: '#D0D0D0',color:'#000000'}"
>
12阴影
// ox-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.3);
单方阴影写法
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
13四边阴影
box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 10px;
margin-bottom: 20px;
14多行超出 …
height: 125px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;//显示的行数
-webkit-box-orient: vertical;
15 justify-content 属性360浏览器不生效
justify-content: flex-end; flex-start
在谷歌里面可以简写 strat 但是不标准,必须使用 flex-start
16 旋转
// 旋转
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
// 旋转
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
17 引入图片时 size 要100% 100% 不然会显示不全
background: url(../../../assets/images/ash-bucket/Three-arrows.png)
no-repeat;
background-size: 100% 100%;
flex水平居中
display: flex;
justify-content: space-evenly;
align-items: center; //水平居中
引入文件地址
background-image:url('~@/assets/')