感谢chokcoco大佬，原来版本是”左边竖条“。

题目和解题思路来源：http://www.cnblogs.com/coco1s/p/5893921.html

主要记录通过这个题目而恶补的css属性们。

 

 

题目1：下面这个图形，只使用一个标签，可以有多少种实现方式：

 

第一种情况：使用border

#div1 { background: #ddd; width: 200px; height: 60px; margin-top: 10px; border-right: 5px solid deepskyblue; }

因为初始化时没有设置box-sizing：border-box，所以默认还是content-box。这里用到的知识点是W3C盒模型。

第二种情况：使用box-shadow

#div1 { background: #ddd; width: 200px; height: 60px; margin-top: 10px; box-shadow: 5px 0 0 0 deepskyblue; }

 

 

 

①box-shadow定义

box-shadow用来设置box（盒子）的shadow（阴影），这里的重点是盒子的阴影，他会将所有的东西看成一个盒子，给予这个整体阴影。谈到这一点不得不讲一下与他形成鲜明对比的drop-shadow，drop-shadow是真实世界的投影，中间没东西的话会暴露出投影。

举个梨子：

#div1 { width: 200px; height: 80px; border: 5px dashed deeppink; margin: 50px; box-shadow: 10px 10px 0 0 black; } #div2 { width: 200px; height: 80px; border: 5px dashed deeppink; margin: 50px; filter: drop-shadow(10px 10px 0 black); }

 

②box-shadow值

box-shadow：x偏移 y偏移 模糊大小 阴影大小 颜色 内/外

<1>模糊大小和阴影大小的区别

模糊大小的效果是一个圆，你设定的数越大它越扩散（扩散半径越大）；

而阴影大小的效果类似border，你设定的值类似border-width。

#div1 { width: 80px; height: 80px; margin: 150px; box-shadow: 0px 0px 50px 0 black; } #div2 { width: 80px; height: 80px; margin: 150px; box-shadow: 0px 0px 0 50px black; }

 

 

<2>内/外阴影 inset

外阴影：从右开始是正，左为负；内阴影：从左开始是正，右是负。所以这个图是阴影在外我们选择外阴影。

 

第三种情况：使用filter:drop-shadow

#div1 { background: #ddd; width: 200px; height: 60px; margin-top: 10px; filter: drop-shadow(5px 0 0 deepskyblue); }

做个比较：

filter:drop-shadow的值只有： x偏移 y偏移 模糊大小 颜色（相比box-shadow少了阴影大小和内/外）。

filter:drop-shadow阴影不能叠加，而box-shadow阴影可叠加。

filter:drop-shadow阴影相比box-shadow颜色淡一些。

 

 

 

第四种情况：使用outline

#div1 { outline: 5px solid deepskyblue; background: #ddd; width: 195px; height: 50px; position: relative; } #div1::after { content: ""; position: absolute; top: -5px; left: -5px; bottom: -5px; right: 0; background: #ddd; }

单纯只用outline: 5px solid deepskyblue，会出现border的效果，使用上也差不多。

看网上很多人说：outline 不会象border那样影响元素的尺寸或者位置。

但现在我还不明白这句话的意思，border什么时候会影响元素的尺寸或位置呢？

 

 

第五种情况：利用scrollbar

#div1 { background: #ddd; width: 205px; height: 60px; margin-top: 10px; overflow-y: scroll; } #div1::-webkit-scrollbar { width: 5px; background: deepskyblue; }

-webkit-scrollbar自定义滚动条样式，注意一定要overflow-y:scroll

 

----------------------------------------------------------一条分割线----------------------------------------------------------

 

 

题目2：下面这个图形，只使用一个标签，可以有多少种实现方式：

 

第一种情况：使用::after ::before伪元素

#div1 { background: #ddd; width: 200px; height: 60px; margin-top: 10px; position: relative; } #div1::before { position: absolute; top: 0px; right: 0px; width: 5px; height: 60px; content: ""; background: deepskyblue; }

在我个人看来无论你写after还是before都是可以的，只要你定义好了top left啥的，不知道这个地方我理解的有没有错误，欢迎大家指正。

因为定义的蓝色竖条在右边，必须采用position:absolute绝对定位（div要设置成relative相对定位），绝对定位的伪元素会跟着相对定位的元素走，否则它就要相对于下一个相对定位的父元素了！如果蓝竖条在左边，我们可以使用display:block，因为伪元素默认是行内元素，所以不能给它定宽高。

 

第二种情况：使用box-shadow inset

#div1 { background: #ddd; width: 200px; height: 60px; margin-top: 10px; box-shadow: -5px 0 0 0 deepskyblue inset; }

就不多解释了，上面已经解释差不多了。

 

第三种情况：使用linear-gradient

#div1 { background: #ddd; width: 200px; height: 60px; margin-top: 10px; background-image: linear-gradient(270deg,deepskyblue 0px, deepskyblue 5px, transparent 5px); }

linear-gradient 线性渐变

注意一定要写background-image不能写background，否则会把上面的background:#ddd盖掉。

值：angle,color position,color position…   （color position又名color-stop）

angle就是颜色渐变的方向，不加浏览器私有前缀时，用一张图表明angle：

加了私有前缀方向的话，需要在原先angle的基础上加90°！！！

linear-gradient是css3新加的方法，是背景的新方式，能够代替图片所以可以加快页面载入时间，并且因为是浏览器直接生成所以缩放效果好。

使用linear-gradient生成一个网格背景：

.stripe { width: 250px; height: 150px; margin: 50px; background: linear-gradient(90deg, gray, gray 50%, transparent 50%, transparent), linear-gradient(gray, gray 50%, transparent 50%, transparent); background-size: 30px 30px; }

此处最重要的反而是background-size了，因为我们实际上只画了30px×30px的小格子：

但是通过background-repeat的默认值：background-repeat：repeat自动将背景x、y方向重复。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

上图我直接将颜色设为了gray，但如果原本只能提供彩色，却需要咱们呈现灰色咋办呢？一个真实的场景，寿光的“人祸”新闻我们需要将背景弄成一种严肃的气氛，一键灰色如何用css3实现呢？

filter: grayscale(1);

css3提供了很多强大功能，比如filter，那我们来复习下filter都有哪些特性吧(o゜▽゜)o☆

1.sepia  墨鱼汁色

filter: sepia(80%);

2.saturate  饱和度

filter: saturate(50%);

当饱和度为0%时相当于灰度图grayscale(1)

3.hue-rotate  色彩反转

先看效果（我觉得这个滤镜最美~

他的写法略有不同！

filter: hue-rotate(330deg);

下面是色轮：

4.invert  反转

filter: invert(1);

本属性很适宜下面这个图：

5.opacity  透明度

filter: opacity(50%);

6.brightness  亮度

filter: brightness(2);

7.contrast  对比度

filter: contrast(2);

8.blur 模糊

filter: blur(2px);

当然还要加上我们之前提到过的drop-shadow，共10种。

 

第四种情况：利用scrollbar

在上一个问题的基础上把宽度减小即可~

#div1 { background: #ddd; width: 205px; height: 60px; margin-top: 10px; overflow-y: scroll; } #div1::-webkit-scrollbar { width: 5px; background: deepskyblue; }