共计 1096 个字符,预计需要花费 3 分钟才能阅读完成。
第一章 引言
DRY (don’t repeat yourself)
- 代码易保护和代码量少不可兼得
border-width: 10px 10px 10px 0;
/** better **/
border-width:10px;
border-left-width: 0;
- cuurentColor
/** 让程度分割线主动与文本的色彩保持一致 **/
hr {
height: 1px;
background: currentColor;
}
- 继承
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. 条纹背景
正文完