# 边框&背景

You need know css

# 半透明边框

相关css属性：

• background-clip

如果没有设置背景图片（background-image）或背景颜色（background-color），那么这个属性只有在边框（ border）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 border-style 或 border-image 有关），否则，本属性产生的样式变化会被边框覆盖。

border: 10px dashed rgba($borderColor, 0.5);
background-clip: padding-box;

# 多边框&内圆

相关css属性：

• box-shadow
• outline
• outline-offset(IE不支持)

.shadow{
  box-shadow: red 0px 0px 0px 10px, green 0px 0px 0px 20px, blue 0px 0px 0px 30px;
}

.outline{
  width: 200px; height: 120px;
  background: #efebe9;
  border: 5px solid #B4A078;
  outline: #B4A078 dashed 1px;
  outline-offset: -10px;
  margin-bottom: 20px;
}

.inner-round{
  box-shadow: 0 0 0 5px gray;
  outline: 6px solid gray;
  border-radius: 5px;
}

# 渐变

# 旋转头像

Evan You

Damian Dulisz

defcc

Edd Yerburgh

Sarah Drasner

Sarah Drasner