1. 浏览器私有前缀

W3C标准所提出的某个css特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器不同的内核，使用私有前缀来测试css特性。在浏览器正式支持该css特性后，就不用再加了。

Chrome，Safari，Edge： -webkit-
IE ： -ms-
Opera ： -o-
Firefox ： -moz-

推荐写法：

-webkit-color: white;
-ms-color: white;
-o-color: white;
-moz-color: white;

2. 长度单位（面试题）

px,em,rem,vh,vw区别是什么？

px：绝对单位，像素 chrome默认的字体大小就是16px。
em：相对单位 ,相对于自身的字体大小来的,如果元素自身没有设置font-size，则继承祖先元素的font-size。
rem：相对单位，只根据html的字体大小来设置 r => root，比如，html的字体大小是20px，则10rem就等于10*20 =200px 。
vh和vw：相对单位，相对视口来设置的。它会将浏览器视口平分为100份，50vw就代表视口宽度的50%，50vh就代表视口高度的50%。vh和vw只是两个单位而已，并不代表着宽度就必须使用vw，高度就必须使用vh。

3. 盒子阴影

盒子阴影：box-shadow:

box-shadow: 10px 10px 10px 10px orange;

参数：params:

h-shadow 水平阴影的位置必填可以为负数。
v-shadow 垂直阴影的位置必填可以为负数。
blur 可选模糊距离:想象为颜色被稀释掉了，没有那么高的浓度。
spread 可选阴影的外延值类似于将阴影向周围扩散。
color 可选阴影的颜色。
inset 可选将外部阴影转为内部阴影。

阴影不会影响到盒模型的大小及其他的盒子

4. 不透明度

相同点：rgba和opacity和transparent都可以用于设置透明度

不同点：

rgba 主要用于控制整个盒子的透明度，不会涉及到盒子内部文本的透明度。

background-color: rgba(0, 0, 255, .1);

opacity 主要用于控制整个盒子及盒子内部的内容透明度，控制整个盒子及内容透明 0-1 值越小，透明度就越高。

opacity: .3;

transparent 主要用于控制盒子内部的文本的透明度，比如将盒子内部的内容设置为透明颜色，不会修改盒子自身的透明度。

color: transparent;

5. 边框圆角

border-radius 可以将盒子变为圆角，通常直接使用border-radius就可以同时设置4个边框的圆角，当border-radius的值是宽高的50%的时候，就会呈现一个正圆形。

单独设置每一个边的圆角

使用fancy-border-radius网站就可以设计出很好看的图形。

单独给左上角设置圆角，注意，先写top，再写left

border-top-left-radius: 50px 100px;

单独给右上角设置圆角

border-top-right-radius: 50px;

单独给左下角设置

border-bottom-left-radius: 50px;

单独给右下角设置

border-bottom-right-radius: 50px;

前面4个值分别对应左上角、右上角、右下角、左下角的x坐标；后面4个值分别对应左上角、右上角、右下角、左下角的y坐标。

border-radius: 30px 40px 50px 60px / 30px 40px 50px 60px;

6. 边框外轮廓

outline:none ； 通常用于清除输入类型表单元素的输入状态

<style>
        input,
        textarea
        {
            outline: none;
        }
        button {
            border: none;
            background-color: orange;
        }

        textarea {
            /* 用于禁止用户拖动文本域区域的大小 */
            resize: none;
        }
    </style>
</head>
<body>
    <input type="text" name="" id="">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>按钮</button>
</body>

7. 文本阴影

text-shadow：用于设置文本阴影

params:

h-shadow 必填设置水平阴影
v-shadow 必填设置垂直阴影
blur: 可选模糊距离
color: 颜色

浏览器私有前缀及文本阴影的分享