CSS揭秘学习笔记

第二章 背景与边框

---

1. 半透明边框
   background-clip属性设置为padding-box可以使背景不侵入边框，默认为border-box，意思是背景被边框的外延框剪裁。

2. 多重边框
   2.1 box-shadow方案
   复习一下box-shadow用法：

• insert内投影，不设为外。可选

• x-offset水平偏移，为正在元素右边

• y-offset垂直偏移，为正在元素上边

• blur-radius阴影模糊半径 只能为正，越大越模糊。为0表示不具备阴影效果。可选

• spread-radius阴影扩展半径 为正 阴影延展扩大。可选

• color颜色.

  注意：box-shadow不影响布局，多个投影之间用,隔开.
  2.2 outline方案
  语法跟border一样，可以使用虚线。使用outline-offset控制跟元素之间的边距。
  但不能设置多个，不会贴合border-radius产生圆角效果（未来可能会改变）。

3. 背景定位

background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px

第二行为扩展语法，它允许我们指定背景图片距离任 意角的偏移量，只要我们在偏移量前面指定关键字。
第一张保证回退。
如果不想设置固定值，参照下面两个方案：
3.1 background-origin 方案
默认情况下，background-position 是以 padding box 为准的，这样边框才不会遮住背景图片。因此，top left 默认指的是 padding box 的左上 角。background-origin在默认情况下，它的值是padding-box。如果把它的 值改成 content-box，我们在background-position属性中使用的边角关键字将会以内容区的边缘作为基准（也就是说，此时背景图片距离边角的偏移量就跟内边距保持一致了）。
3.2 calc() 方案
注意要在calc() 函数内部的- 和 + 运算符的两侧各加一个空白符，否则会产生解析错误！

4. 边框内圆角
   方法一：添加外层div做大背景，内部div设置border-radius

<div class="something-meaningful">
   <div>I have a nice subtle inner rounding,     don't I look pretty? 
   </div>
</div>  
.something-meaningful {     
   background: #655;     
   padding: .8em; 
}  
.something-meaningful > div {     
   background: tan;     
   border-radius: .8em;     
   padding: 1em; 
}

方法二：设置outline，因为outline不受border-radius影响。至于outline与内容之间的空白用box-radius填充，因为受border-radius影响。扩展半径spread-radius的设置要比outline小，比border-radius的值当直角等边三角形的直角边的斜边大。

第四章 背景与边框

---

1. 平行四边形
   原理：使用transform的skew函数。并把背景，边框等样式应用到伪元素上

.skew{
      position: relative;  
      &::before{    
        position: absolute;    
        content: '';    
        top:0;    left: 0;    right:0;    bottom:0;    
        z-index: -1;   
        transform: skew(315deg);//向右    
        background: #58a; 
     }
}

2. 菱形图片
   方法一：使用transform的rotate函数以及scale函数，只对正方形生效。外层旋转45度，内层设置max-width:100%,反旋转45度，并放大1.42

第六章 用户体验

1. 关于鼠标光标
   1.1提示禁用状态

:disabled, [disabled], [aria-disabled="true"] {     
  cursor: not-allowed; 
}

1.2隐藏鼠标光标

cursor: url('transparent.gif'); 
cursor: none

2. 扩大可点击区域
   方法一：使用border和background-clip

border: 10px solid transparent; 
background-clip: padding-box;

如果需要真正的边框，用box-shadow模拟
方法二：使用伪元素

button {     
    position: relative;
}
button::before {     
    content: '';     
    position: absolute;     
    top: -10px; 
    right: -10px;     
    bottom: -10px;
    left: -10px; 
}