关于css:笔记css揭秘

41次阅读

共计 1096 个字符,预计需要花费 3 分钟才能阅读完成。

第一章 引言

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. 条纹背景

正文完
 0