CSS常用属性

• 盒子阴影

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px red;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em aqua;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

如果元素同时设置了 border-radius 属性，那么阴影也会有圆角效果。

• 文字阴影

/* 阴影水平方向上的偏移 | 阴影垂直方向上的偏移 | 阴影的模糊程度 | 阴影的颜色 */
text-shadow: 1px 1px 1px #ccc;

上述表达的意思为：阴影在水平方向上向右偏移 1px，垂直方向上向下偏移 1px，模糊程度为 1px，阴影的颜色为 #ccc。

• 设置input元素的placeholder垂直居中

<input type="text" placeholder="请输入密码">

input {
    height: 30px;
}
input::placeholder {
    position: absolute;
    height: 30px;
    line-height: 30px;
}

• 设置元素宽高比(aspect-ratio)

div {
    width: 200px;
    aspect-ratio: 1/2;      //设置元素宽高比，此时元素宽200px,高400px
    /* 可选值 */
    aspect-ratio: inherit;
    aspect-ratio: initial;
    aspect-ratio: unset;
}

• 去掉元素的修饰线

//去掉a标签的下划线
text-decoration: none;

• 用css实现一个三角形

.d1 {
    /* 因为块级元素都是默认宽度父元素的100% 所以要给0*/
    width: 0;

    /* 先把四个边都设置为透明，边框宽度决定三角的大小 */
    border: 90px solid transparent;

    /* 单独设置需要的边角有颜色即可显示 */
    border-top-color: red;

}

• 去掉轮廓线

outline: none;

• 光标设置

cursor: default;    //箭头光标
cursor: text;      //工字型选择文本
cursor: pointer;   //手型
cursor: crosshair;  //十字型
cursor: text;      //一条竖线
cursor: move;      //某对象可被移动
cursor: e-resize;      //矩形框的边缘可被向右（东）移动
cursor: ne-resize;      //矩形框的边缘可被向上及向右移动（北/东）
cursor: nw-resize;      //矩形框的边缘可被向上及向左移动（北/西）
cursor: n-resize;      //矩形框的边缘可被向上（北）移动
cursor: wait;         //程序正忙（通常是一只表或沙漏）
cursor: help;         //可用的帮助（通常是一个问号或一个气球）

• 全屏的固定定位的遮罩层

.mark {
    background-color: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

• 首行缩进

text-indent: 2em;     //第一行文本向内缩进2倍的字符