CSS 绘图（一）

2015/03/24 | 2分钟阅读 | 更新于 2015/03/24

未完持续

看了一些css的绘图，试试学习一下。发现天猫的logo 看起来比较简单的样子，看了看源码，学了一点东西

圆弧/曲线

给某个div加上边框，某边的两条邻边设为透明，然后设置border-radius也就是圆角，会生成1/4的圆弧形状，或者说是个扇形吧。

代码的话

div.nose {
  width: 0px;
  height: 0px;
  border: 50px solid #eeeeee; /*可以把颜色换成transparent*/
  border-bottom: 70px solid #129090;
  border-radius: 100%;
}

如果标签的长宽比不为一，就能做出一些不是圆弧的曲线/面

div.book {
  width: 100px;
  height: 150px;
  border-bottom-right-radius: 100%;
  background-color: #9090ff;
}

梯形/三角形

如果不设置某边邻边的边框，那么这个边的边框是个矩形，那么对边两个边框，加上背景色，加上一个阴影，最多可以有四条不同的颜色的矩形连成串。

略

好吧，这不是关键。如果某边有border，然后邻边再来一个，然后把邻边的border颜色和背景色设为transparent，那么

天猫logo的手就是这么绘制的

如果这个div或者什么的宽度为0，那么这就是一个三角形

div.square {
  width: 30px;
  height: 30px;
  border-bottom: 90px solid #123456; /*Here!*/
  border-right: 20px solid transparent;
}

透明色

background-color: transparent;
/***** OR ******/
background-color: rgba(x, x, x, 0);

background 详解

background-origin:content-box;
/*OR border-box OR padding-box*/
background-position:center; /*规定背景图位置，默认0% 0%*/
/*
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
默认0% 0%
*/
background-attachment:scroll; /*默认值。背景图像会随着页面其余部分的滚动而移动。*/
/*
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit */