[笔记]css揭秘

第一章 引言

DRY (don't repeat yourself)

1. 代码易维护和代码量少不可兼得

border-width: 10px 10px 10px 0;

/** better **/
border-width:10px;
border-left-width: 0;

1. currentColor

/** 让水平分割线自动与文本的颜色保持一致 **/
hr {
    height: 1px;
    background: currentColor;
}

1. 继承

inherit 可以用在任何 CSS 属性中，而且它总是绑定到父元素的计算值（对伪元素来说，则会取生成该伪元素的宿主元素）。

第二章 背景与边框

1. 半透明边框

border: 10px solid hsla(0, 0%, 100%, .5);
background: white;
background-clip: padding-box;

2. 多重边框

box-shadow方案：只能模拟实现边框

background: yellowgreen; 
box-shadow: 0 0 0 10px #655, 
            0 0 0 15px deeppink, 
            0 2px 5px 15px rgba(0,0,0,.6);

outline方案：只适用于双层边框

background: yellowgreen;
border: 10px solid #655;
outline: 5x solid deeppink;
outline-offset: 0px; // 与元素边缘的间距，接收负值

3. 灵活的背景定位

background-position的扩展语法：指定背景图片距离任意角的偏移量，在偏移量前面指定关键字。

/** bottom right为浏览器不支持时的回退方案 **/
background: url('xx.png') no-repeat bottom right #655; 
background-position: right 20px bottom 10px;

background-origin方案：

padding: 20px 10px; 
background: url('xx.png') no-repeat #58a bottom right;
background-origin: content-box; /* 默认padding-box */

calc方案：

background: url('xx.png') no-repeat;
background-position: calc(100% - 20px) calc(200% - 10px);

4. 边框内圆角

background: tan; 
border-radius: .8em; 
padding: 1em; 
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;

5.条纹背景

background: linear-gradient(#fb3 50%, #58a 50%); background-size: 100% 30px;

第三章 形状

1. 椭圆

border-radius: 50%; /* 自适应椭圆 */
border-radius: 100% 0 0 100% / 50%; /* 半个椭圆 */
border-raius: 100% 0 0 0; /* 四分之一椭圆 */

2. 平行四边形

transform: skewX(-45deg);

3. 菱形图片

/** hack方案，没有兼容性问题 **/
.picture { 
    width: 400px; 
    transform: rotate(45deg); 
    overflow: hidden; 
} 
.picture > img { 
    max-width: 100%; 
    transform: rotate(-45deg) scale(1.42);
}

/** clip-path，浏览器多数不兼容 **/
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

4. 切角

a. 单角

background: linear-gradient(-45deg, transparent 15px, #58a 0);

b. 四角

background: #58a; 
background: linear-gradient(135deg, transparent 15px, #58a 0) top left, 
            linear-gradient(-135deg, transparent 15px, #58a 0) top right, 
            linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, 
            linear-gradient(45deg, transparent 15px, #58a 0) bottom left; 
background-size: 50% 50%; 
background-repeat: no-repeat;

c. 弧形切角

background: #58a; 
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, 
            radial-gradient(circle at top right, transparent 15px, #58a 0) top right, 
            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, 
            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left; 
background-size: 50% 50%; 
background-repeat: no-repeat;

d. 内联SVG与border-image方案

border: 15px solid transparent; 
border-image: 1 url('data:image/svg+xml,\ 
        <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\ 
            <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\ 
        </svg>');

未来，我们再也不需要费尽心机地动用 CSS 渐变、裁切或 SVG 来实现这个效果了。CSS 背景与边框（第 四版）（http://dev.w3.org/csswg/css-b...）将引入一个全新的属性 corner-shape，可以彻 底解决这个痛点。这个属性需要跟 border-radius 配合使用，从而产生各种不同形状的切角效果，而切 角的尺寸正是 border-radius 的值。举例来说，为容器的四个角指定 15px 的斜面切角就是如此简单：

border-radius: 15px; 
corner-shape: bevel;

5. 梯形

.tab { 
    position: relative; 
    display: inline-block; 
    padding: .5em 1em .35em; 
    color: white;
} 
.tab::before { 
    content: ''; /* 用伪元素来生成一个矩形 */ 
    position: absolute; 
    top: 0;
    right: 0;
    bottom: 0; 
    left: 0;
    z-index: -1; 
    background: #58a;
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg); /* scaleY(1.3)为回退样式 */
    transform-origin: bottom;
}

第四章 视觉效果