CSS之右边竖条的实现方法

感谢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;
        }