总结Css 常用的操作

1、总结css 常用的操作频繁的css样式操作 单行文本溢出掩藏 语法：white-space: nowrap| pre | pre-wrap | pre-line | inherit nowrap：单行文本不换行，文本显示一行； pre: 保留空白(在巡游器显示时，保留空格)； pre-wrap: 保留空白序列，正常换行； pre-line: 合并空白符序列，但是保留换行符; inherit: 继承父级元素white-space 属性的值； 语法：text-overflow：clip | ellipsis | string clip: 裁剪文本； ellipsis：省略号的形式替代被裁剪的文本；

2、 string: 用法制定的字符来替代被裁剪的字符(且支持火狐扫瞄器)； div white-space: &39;nowrap&39; overflow: hidden; text-overflow: ellipsis; 我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月收拾了一份最适合2019年学习的web前端学习干货，各种框架都有收拾，送给每一位前端小伙伴，想要猎取的可以关注我并在后台私信我：前端，即可免费猎取。 多行文本溢出掩藏 语法：display: -webkit-box ，将对象作为弹性伸缩盒子模型显示；

3、 语法：-webkit-line-clamp：number -webkit-line-clamp：限制一个块元素显示文本的行数(number) 语法：-webkit-box-orient：horizontal | vertical | inline-axis | block-axis 设置或检索伸缩盒对象的子元素的罗列方式： horizontal： 盒子水平布局其内容； vertical：盒子垂直布局其内容； inline-axis：盒子沿内联轴展示其子元素； block-axis：盒子沿块轴展示其子元素； div overflow: hidden; text-overflow: ellips

4、is; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 实现三角形的效果(向上) transparent：表示设置为透亮 .triangle width: 0; height: 0; border-right: 20px solid transparent; border-left: 20px solid transparent; border-bottom: 20px solid red; css3 实现垂直居中 语法：display:flex,justify-content:center,

5、 align-items: center display:flex,设置弹性布局显示； justify-content: center, 设置子元素水平居中； align-items: center, 设置子元素垂直居中； div display: flex; justify-content: center; align-items: center; css3 实现阴影效果 语法：box-shadow: h-shadow v-shadow blur spread color inset; h-shadow：水平阴影位置(必选)，允许负值； v-shadow： 垂直阴影的位置(必选)，允许负值；

6、 blur：含糊距离(选填)； spread: 阴影大小(选填)； color:阴影色彩(选填)； inset: 从外层的阴影（开头时）转变阴影内侧阴影(选填),默认是外阴影； div box-shadow: 2px 2px 2px 2px f00 inset; css3 实现圆角效果 语法：border-radius: number px; number 为数字 border-radius可设置多个值； 一个值：表示四个圆角都相同； 二个值：第一个值为右上和左下圆角的值，其次个值为右下和左上圆角的值； 三个值：第一个值为左上圆角的值，其次个值为右上和左下圆角的值，第三个值为右下的值； 四个个

7、值：第一个值为左上圆角的值，其次个值为右上，第三个值为右下的值，第四个为左下圆角的值； div border-radius: 30px; /*border-radius: 10px 30px*/ /*border-radius: 10px 20px 30px*/ /*border-radius: 10px 20px 30px 40px*/ css3 实现文本效果 语法：text-shadow: h-shadow v-shadow blur color; h-shadow：必须。水平阴影的位置。允许负值； v-shadow：必须。垂直阴影的位置。允许负值； blur： 可选。含糊的距离； col

8、or：可选。阴影色彩； div text-shadow: 2px 2px 2px f00; css 伪类first-letter 语法： first-letter表示向段落文本第一个字符添加特别样式 div:first-letter font-size: 50px; color:f00; . css 伪类first-line 语法： first-line表示向文本的首行添加特别样式 div:first-line font-size: 50px; color:f00; . css 跨巡游器透亮 兼容ie8及以下版本 div width: 200px; height: 200px; backgro

9、und: 00b7ff; opacity: 0.5; /*标准巡游器*/ filter: alpha(opacity=50);/*ie低版本 8*/ css3 裁剪 语法：object-fit: contain | cover | fill | none | scale-down contain: 缩放内容，保持内容的宽高比； cover: 填充囫囵内容框，保持内容宽高比，假如对象的宽高比与内容框不匹配，该对象将裁剪以适应内容宽； fill: 填充囫囵内容框（默认值），不保持原有比例； none: 保持宽高不变； scale-down: 当实际宽高小于所设置的宽高时，显示效果与none全都；否

10、则，显示效果与contain全都； div img width:100%; height:100%; object-fit: cover; 设置 input placeholder 的色彩 div:-webkit-input-placeholder color: 999 div:-moz-placeholder color: 999 div:-moz-placeholder color: 999 div:-ms-input-placeholder color: 999 含糊滤镜效果 语法： filter：blur() | brightness() | contrast() | drop-sha

11、dow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() blur(px): 设置高斯含糊，用法px为单位； brightness(%): 设置图像明暗，用法%为单位，值越大越亮； contrast(%): 调节图像的对照度。 drop-shadow(h-shadow v-shadow blur spread color): 给图像设置一个阴影效果，参考box-shadow； grayscale(%): 将图像转换为灰度图像，用法%为单位； hue-rotate(deg): 给图像应用色相旋转，用法deg为单位； invert(%): 设置反转输入图像，值为0-100%；