CSS常用简写样式

忘是亡心i 2022-10-31 10:55 123阅读 0赞

# ***1：*****文本** #

### ***1)：文字简写*** ###

// 倾斜 粗细 字号/行高 字体
    
    font: italic bold 1em/1.5 'Courier New', Courier, monospace;

# ***2：*****盒子模型** #

### ***1)**：*内外外边距** ###

padding/margin一个值：上下左右
    
    padding/margin两个值：上下 左右
    
    padding/margin三个值：上 左右 下
    
    padding/margin四个值： 上 下 左 右

### ***2)**：*边框轮廓线简写** ###

// 线条样式 粗细 颜色
    
    border/outline: groove 30px blue;

### ***3)**：***边框圆角 ###

// 四个角均10px
    border-radius:10px;
    
    // 左上角&右下角10px，左下角&右上角15px
    border-radius:10px 15px;
    
    
    // 左上 右上 右下 左下 即从左上开始顺时针
    border-radius:10px 15px 20px 25px;

### ***4)**：*visibility与display区别** ###

// 隐藏元素，留位置
    visibility:hidden;
    
    // 隐藏元素，不留位置
    display:none;

# ***3：*****背景** #

### ***1)：*背景样式简写** ###

// 背景颜色 背景图 不重复 背景剪裁区域 背景尺寸或是否跟随滚动或背景位置
    
    background:red url(./33.jpg) no-repeat border-box center;

### ***2)：*盒子阴影** ###

// 水平偏移,垂直偏移,模糊度,颜色
    
    box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);
    
    
    // 水平偏移,垂直偏移,阴影模糊度,阴影扩展半径,颜色 不写inset默认外阴影
    
    box-shadow: 0px 0px 20px 4px #888888 inset;

注：颜色可以使用`currentColor`来获取当前盒子的`color`。并且一个盒子可以有多个阴影

### ***3)：*渐变** ###

// 线性渐变：倾斜30°，红色到绿色
    background: linear-gradient(30deg, red, green);
    
    
    // 径向渐变：红色到绿色，渐变方向为底部向中心
    background: radial-gradient(at bottom center ,red, green);

## 注：color颜色的缩写方式，例如，“color:\#000000可以缩写为color:\#000，color:\#336699”可以缩写为color:\#369;” ##

# ***4******：*弹性布局** #

### ***1)：*弹性盒子简写** ###

// 垂直排列 反向换行
    
    flex-flow: column wrap-reverse;

### ***2)：*弹性元素简写** ###

// 放大尺寸：1 缩小尺寸0 主轴基准尺寸10%
    
    flex:1 0 10%

# ***5******：*栅格布局** #

### ***1)：*栅格容器简写** ###

// 绘制3行 3列的栅格容器
    
    grid-template: repeat(3,100px)/repeat(3,100px);

### ***2)：*栅格容器间距简写** ###

// 栅格容器中区域间距均为10px
    
    gap:10px;

### ***3)：*栅格元素区域简写** ###

// 行线开始/列线开始/行线结束/列线结束
    
    grid-area: 2/1/span 1/span 3;

### ***4)：*对齐方式简写** ###

**place-content：**用于控制栅格中所有区域的对齐方式，语法如下

place-content: <align-content> <justify-content>

**place-items：**控制所有区域中所有元素的对齐方式，语法结构如下

place-items: <align-items> <justify-items>

**place-self：**控制区域中单个元素的对齐方式，语法结构如下

place-self: <align-self> <justify-self>

# ***6******：*变形动画** #

### ***1)：*移动简写** ###

// X轴平移 Y轴平移
    
    transform: translate(100px,100px);
    
    
    // X轴平移 Y轴平移 Z轴平移（由于Z轴可以无限远，所以不能用百分比）
    
    transform: translate3d(50%, 50%, 100px);

### ***2)：*缩放简写** ###

// 定义 2D 缩放转换, X轴缩放 Y轴缩放
    
    transform: scale(.5,2);
    
    
    // 定义 3D 缩放转换, X轴缩放 Y轴缩放 Z轴缩放
    
    transform: scale3d(.5,.5,.5);

### ***3)：*旋转简写** ###

// X/Y轴平面旋转（就是中心点）
    
    transform: rotate(90deg);
    
    
    // 向量：X/Y/Z都转180°
    
    transform: rotate3d(1,1,1,180deg);

### ***4)：*倾斜简写** ###

// X/Y轴倾斜60°
    
    transform: skew(60deg, 60deg);

# ***7******：*过渡时间简写** #

/* 参与过渡的动画 贝塞尔曲线 过渡时间 延迟时间 */
    
    transition: border-radius linear 2s 0s,background 2s 2s,width linear 2s 4s,height linear 2s 4s;

# ***8******：*帧动画简写** #

和CSS中的其他属性一样，可以使用`animation`组合定义帧动画。animation 属性是一个简写属性，用于设置六个动画属性：

*  animation-name 帧动画名字
 *  animation-duration 帧动画运行时间
 *  animation-timing-function 帧动画速率
 *  animation-delay 帧动画播放状态（暂停/运行）
 *  animation-iteration-count 帧动画循环次数
 *  animation-direction 延迟时间