前端样式CSS（Secrets）

形状

作者：唐乙辉
撰写时间：2019年1月18日

• 宽高相同，border-radius 大于等于一半就是一个正圆，按宽高比例减小各个边框半径带下，直到不重叠为止。
  border-radius 一般是简写形式，可以通过 / 单独指定水平和垂直半径，水平半径 / 垂直半径
  border-radius
  展开式属性，支持最多两个值，必须使用空格分隔。分别表示水平半径和垂直半径。而 border-radius 那种斜杠 / 分隔的写法这里是不支持的，只能是空格。
  
  border-radius 水平半径 / 垂直半径，各支持“上右下左”四个值写法

上半椭圆
border-radius: 50% / 100% 100% 0 0;
左半椭圆
border-radius: 100% 0 0 100% / 50%;
左上四分之一圆
border-radius: 100% 0 0 0;

平行四边形

1.平行四边形是矩形的父集，各条边两两平行，但是角度不一定是直角。
2.CSS创建平行四边形的思路是通过 skew 实现。
3.直接将整个元素倾斜的话，元素的内容也会倾斜。
4.我们可以将内容单独用一层结构包裹在倾斜元素内，然后将内容反向倾斜
5.按照这种思路我们可以将倾斜元素作为子元素，这样就不会影响内容了，所以用伪元素代替是个好办法

嵌套元素方案：

.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }

伪元素方案：

Click me

.button {
position: relative;
/* 其他的文字颜色、内边距等样式…… */
}
.button::before {
content: ‘’;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}

视觉效果

单侧投影
一般我们使用 box-shadow 的方法是，指定三个长度值和一个颜色值：
box-shadow: 2px 3px 4px rgba(0,0,0,.5);

box-shadow 的参数列表是 box-shadow: X Y 模糊半径R1 扩张半径R2 颜色值;

所以上面的css属性值会生成一个相对于元素向右偏移2px，向下偏移3px，模糊半径为4px的阴影，我们把阴影看做是一个元素的话，这个元素的尺寸相当于比原来的元素大4*2=8px。

注意：确切地说，我们将在顶部看到1px的投影（4px-3px）、在左侧看到2px（4px-2px）、在右侧看到6px（4px+2px）、在底部看到7px（4px+3px）。在实践中，投影看起来会比这些值稍小，因为投影的颜色在边缘处的过渡不是线性的，这跟渐变不一样。

如果要实现单侧投影，我们就需要用到第四个属性，扩张半径啦。这个参数会根据你指定的值去扩大或（当指定负值时）缩小投影的尺寸。很显然，当我们设置了模糊半径之后，我们只有将扩张半径设置为负数才能缩小阴影，那这个值具体是多大呢，只要小于模糊半径的相反数就可以了，比如这样设置：box-shadow: 0 5px 4px -4px black;。

邻边投影

要实现只在两条邻边有 box-shadow ，最简单的办法就是在基础用法上面将X和Y的偏移量调整到大于模糊半径的值就行，但是我们会发现这样会造成元素有一个比较大的阴影，视觉效果达不到要求，这时我们可以考虑结合扩张半径属性来进行优化，利用扩张半径的负值来缩小阴影，具体数值该设置为多大呢，我们将偏移量调整为模糊半径的一半，扩张半径调整为模糊半径相反数的一半，比如：box-shadow: 3px 3px 6px -3px black; 就可以达到最终想要的效果了。

双侧投影

扩张半径在四个方向上的作用是均等的（也就是说，我们无法指定投影在水平方向上放大，而在垂直方向上缩小），唯一的办法是用两块投影（每边各一块）来达到目的。然后基本上就是把“单侧投影”中的技巧运用两次：box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;。

总结Border-radius是的优点
提高网站性能
增加了视觉美观性
网站样式圆角性
我们都用border-radius不用图片来显示，这就大大增加了网站的性能，大大增加了网站的加载速度。