CSS 常用的操作

1. 单行文本溢出掩藏

   语法：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：省略号的形式替代被裁剪的文本；
   • string: 使用制定的字符来替代被裁剪的字符(且支持火狐浏览器)；

   div {    
       white-space: ‘nowrap‘;     
       overflow: hidden;     
       text-overflow: ellipsis;
   }　

2. 多行文本溢出掩藏

   语法：display: -webkit-box ，将对象作为弹性伸缩盒子模型显示；

   语法：-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: ellipsis;
               display: -webkit-box;
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;
   }

3. 实现三角形的效果(向上)
   transparent：表示设置为透明

           .triangle {
               width: 0;
               height: 0;
               border-right: 20px solid transparent;
               border-left: 20px solid transparent;
               border-bottom: 20px solid red;
           }　

4. css3 实现垂直居中

   语法：display:flex,justify-content:center, align-items: center

   • display:flex,设置弹性布局显示；
   • justify-content: center, 设置子元素水平居中；
   • align-items: center, 设置子元素垂直居中；

           div {
               display: flex;
               justify-content: center;
               align-items: center;
           }　

5. css3 实现阴影效果

   语法：box-shadow: h-shadow v-shadow blur spread color inset;

   • h-shadow：水平阴影位置(必选)，允许负值；
   • v-shadow： 垂直阴影的位置(必选)，允许负值；
   • blur：模糊距离(选填)；
   • spread: 阴影大小(选填)；
   • color:阴影颜色(选填)；
   • inset: 从外层的阴影（开始时）改变阴影内侧阴影(选填),默认是外阴影；

   div {  box-shadow: 2px 2px 2px 2px #f00 inset;}
   

6. css3 实现圆角效果

   语法：border-radius: number px; number 为数字

   border-radius可设置多个值：
   一个值：表示四个圆角都相同；
   二个值：第一个值为右上和左下圆角的值，第二个值为右下和左上圆角的值；
   三个值：第一个值为左上圆角的值，第二个值为右上和左下圆角的值，第三个值为右下的值；
   四个个值：第一个值为左上圆角的值，第二个值为右上，第三个值为右下的值，第四个为左下圆角的值；

   div {   
       border-radius: 30px;    
       /*border-radius: 10px 30px*/  
        /*border-radius: 10px 20px 30px*/  
        /*border-radius: 10px 20px 30px 40px*/
   }　　

7. css3 实现文本阴影效果

   语法：text-shadow: h-shadow v-shadow blur color;

   • h-shadow：必需。水平阴影的位置。允许负值；
   • v-shadow：必需。垂直阴影的位置。允许负值；
   • blur： 可选。模糊的距离；
   • color：可选。阴影颜色；

   div {    text-shadow: 2px 2px 2px #F00;}

8. css 伪类first-letter
   语法： first-letter表示向段落文本第一个字符添加特殊样式

   div:first-letter{    font-size: 50px;    color:#f00;    ........}

9. css 伪类first-line
   语法： first-line表示向文本的首行添加特殊样式

   div:first-line {    font-size: 50px;    color:#f00;    ........}

10. css 跨游览器透明
    兼容IE8及以下版本

    div{    
        width: 200px;      
        height: 200px;      
        background: #00B7FF;      
        opacity: 0.5; /*标准游览器*/      
        filter: alpha(opacity=50);/*IE低版本 8*/
    }

11. css3 图片裁剪

    语法：object-fit: contain | cover | fill | none | scale-down

    • contain: 缩放内容，保持内容的宽高比；
    • cover: 填充整个内容框，保持内容宽高比，如果对象的宽高比与内容框不匹配，该对象将裁剪以适应内容宽；
    • fill: 填充整个内容框（默认值），不保持原有比例；
    • none: 保持图片宽高不变；
    • scale-down: 当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致；

    div img {    width:100%;    height:100%;    object-fit: cover;}

12. 设置 input placeholder 的颜色

    div::-webkit-input-placeholder {
        color: #999
    } 
    div:-moz-placeholder { 
        color: #999
    } 
    div::-moz-placeholder {
        color: #999
    } 
    div:-ms-input-placeholder {  
        color: #999
    }

13. 模糊滤镜效果

    语法： filter：blur() | brightness() | contrast() | drop-shadow() | 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%；
    • opacity(0.5): 设置透明程度,值为0-1；
    • saturate(%): 设置图像饱和度；
    • sepia(%): 将图像转换为深褐色，值为0-100%；
    • url(): URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素

    div{    filter: blur(1px);}

CSS 常用的操作

原文：https://www.cnblogs.com/liontone/p/12263507.html