关于css:笔记css揭秘

第一章 引言

DRY (don’t repeat yourself)

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

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

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

1. cuurentColor

/** 让程度分割线主动与文本的色彩保持一致 **/
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. 条纹背景