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;  //消除模糊效果

// 垂直居中
main {
    position： absolute;
    top: calc(50% - 3em);
    left: calc(50% - 9em);
    width: 18em;
    height: 6em;
}
main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18em;
    height: 6em;
}
body {
    display: flex;
    
    main {
        margin: auto;  // 父元素设置flex后，margin: auto将会在垂直和水平方向都居中
    }
}

css secrets 阅读笔记

猜你喜欢