CSS常用简写样式

2021-02-22 15:31:10 阅读：224 来源： 互联网

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 延迟时间

标签：动画,缩放,样式,栅格,animation,10px,简写,CSS
来源： https://blog.csdn.net/qq_37916164/article/details/113933511

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9