css secrets 阅读笔记

1. 半透明边框

background-clip 调整背景和边框关系

2. 多重边框实现方法

（1）box-shadow

（2）outline

outline-offset 可以控制描边与元素边缘的距离，可以是负值。

3. 背景定位

background-position：right 20px bottom 16px；

背景距离元素右边20px，距离元素底边16px

background-origin：border-box | padding-box |  content-box

设置背景起始位置

4. 边框内圆角

background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;          //跟随border-radius变化，变成圆角
outline: .6em solid #655;             //描边并不会跟随border-radius变化依然直角

5. 菱形图片

//菱形图片
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

6. 毛玻璃

hsla(0,100%,80%,0.5);            //h色度，s饱和度，l亮度，a透明度

body, .main::before {
    background: url("tiger.jpg") 0 / cover fixed;
}
.main {
    position: relative;
    background: hsla(0,0%,100%,.3);
    overflow: hidden;
}
.main::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    filter: blur(20px);
    margin: -30px;
}

7. 折角

background：#58a;
background: 
    linear-gradient: (to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0)
                     no-repeat 100% 0 / 2em 2em;
    linear-gradient: (-135deg, transparent 1.5em, #58a 0);

8. 精确控制表格列宽

// 设置表格为固定宽度，加快渲染速度
table {
    table-layout: fixed;
    width: 100%;
}
// 修剪文本
// ellipsis显示省略符号来代表被修剪的文本
div {
    text-overflow: clip|ellipsis|string;
}

9. 满幅背景，定宽内容

// 单一标签替换常用的两个标签margin：1em auto
footer {
    padding: 1em;
    padding: 1em calc(50% - 450px);
    background: #333;
}

10. 垂直居中

transform-style: preserve-3d;  //消除模糊效果

// 垂直居中的几种方式
// 1.元素的宽高已知，可以用绝对定位，top/left设为（50%-高/宽的一半）实现
.main {
    position： absolute;
    top: calc(50% - 3em);
    left: calc(50% - 9em);
    width: 18em;
    height: 6em;
}
// 2.宽高未知，利用绝对定位以及translate（-50%， -50%）实现
.main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
// 3.利用flex伸缩盒子布局实现，设置水平居中和垂直居中
.main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18em;
    height: 6em;
}
// 4.body设为flex布局，元素设置margin：auto实现水平和垂直居中
body {
    display: flex;
    
    .main {
        margin: auto;  // 父元素设置flex后，margin: auto将会在垂直和水平方向都居中
    }
}
// 5.元素宽高已知，利用绝对定位，上下左右四个方向值设为0，同时margin：auto实现垂直水平对齐
.main {
    width: 6em;
    height: 6em;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}