CSS

CSS

• !important：优先执行

• text-transform:uppercase; 将所有字母换成大写字母

• CSS样式中的大于号(>)： body div是上下文选择符，表示选择body里面的所有div，是所有的，无论是不是直接承下关系。但是body>div不同。>是子代选择符，它表示的是选择body的子代div。
  假如有一个DIV层包含多个span标签，代码如下：

<div>
      <span>span1</span>
      <span>span2</span>
     <span>span3</span>
</div>

此时用CSS定义其样式应该这样：

div span {
     font:10px;
     color:blue;
}

但是，需要将第一个span标签显示不同的样式，后两个标签样式不变，怎么办呢？将第一个span放到一个p标签中，可以吗？代码如下：

<div>
   <p>
         <span>span1</span>
   </p>
   <span>span2</span>
    <span>span3</span>
</div>

这样不可以，因为div span {……}样式对div层之下的所有span标签都起作用，不管是子标签，还是孙辈的标签，所以该样式依然起作用。此时就用到了CSS中的”大于号”。
把这个样式改变一下，代码如下：

div > span {
    font:10px;
    color:blue;
}

这样就可以实现第一个span标签与其它两个显示不同的样式。所以我们可以知道CSS中的”大于号”的作用是：在嵌套标签中，将样式只作用于儿子辈的标签，而不作用于孙子辈的标签。
但是还有这一种情况，如下代码：

<div>
     <span>span1
             <span>span1.1</span>
      </span>
     <span>span2</span>
     <span>span3</span>
</div>

这个”大于号”不会起作用。因为这个孙子辈的span标签继承儿子辈的span标签样式。

• background:rgba(色值一，色值二，色值三，透明度); 设置为半透明的背景色。例如：background:rgba(0,0,0,0.5);透明度为0.5的黑色。

• box-shadow: 阴影效果，向框添加一个或多个阴影。
  box-shadow属性接收一个由5个部分组成的值：
  box-shadow: offset-x offset-y blur spread color position;
  offset-x
  第一个长度值指定了阴影的水平偏移量。即在x轴上阴影的位置。正值使阴影出现在元素的右边，而负值使阴影出现在元素的左边。

.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }

.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }

offset-y
第二个长度值指定了阴影的垂直偏移量。即在y轴上阴影的位置。正值使阴影出现在元素的上边，而负值使阴影出现在元素的下边。

.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }

.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }

blur
第三个长度值代表阴影的模糊半径，举例说明，就像你在设计软件中使用高斯模糊滤镜。0值意味着阴影是完全实心和尖锐的，没有任何模糊。模糊数值越大，尖锐度越小，阴影越朦胧和模糊。负值是不被允许的，并会被处理成0。

.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }

.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }

.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }

spread
第四个，同时也是最后一个长度值代表着阴影的尺寸。这个值可以被想象成从元素到阴影的距离。正值会在元素的各个方向按指定的数值延伸阴影。负值会使阴影收缩得比元素本身尺寸还小。默认值0会让阴影伸展得和元素的大小一样。

.left { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }

.middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }

.right { box-shadow: 0px 50px 20px -20px rgba(0,0,0,0.5) }

color
颜色值，正如你期望的，是阴影的颜色。可以是任何颜色单位。

position
box-shadow属性的最后一个值是一个可选的关键字，它代表着阴影的位置。默认情况下，这个值并而没有给出，这意味着阴影是一个外部阴影。我们能通过关键字inset使阴影变成内部阴影。

.left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset }

.right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) }

多重阴影
box-shadow 属性能在单个元素上接受多个阴影。每个阴影通过用逗号分隔的 box-shadow 属性列表来加载。

JavaScript

.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */
                20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */
}

1
2
3
4
5
.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */
                20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */
}

圆形阴影
box-shadow 属性的边界半径是通过该元素的 border-radius 属性来控制的。

.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5);
    border-radius: 50%;
}

弹出效果
在box-shadow（和transform）属性上进行变形，我们能创造出一个元素靠近或者远离使用者的假象。

.popup {
    transform: scale(1);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s, transform 0.5s;
}
.popup:hover {
    transform: scale(1.3);
    box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s, transform 0.5s;
}

浮动效果
我们能在:after这样的伪元素上增加box-shadow的效果。我们能使用这个来创建出元素底部的阴影，给予元素浮起或者掉落下来的假象。

.floating {
    position: relative;

    transform: translateY(0);
    transition: transform 1s;
}
.floating:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    height: 8px;
    width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);

    transform: translate(-50%, 0);
    transition: transform 1s;
}

/* Hover States */
.floating:hover {
    transform: translateY(-40px);
    transition: transform 1s;
}
.floating:hover:after {
    transform: translate(-50%, 40px) scale(0.75);
    transition: transform 1s;
}

• transition: property duration timing-function delay
  可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
  transition属性是个复合属性，她包括以下几个子属性：
  transition-property ：规定设置过渡效果的css属性名称
  transition-duration ：规定完成过渡效果需要多少秒或毫秒
  transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
  transition-delay ：指定开始出现的延迟时间
  默认值分别为：all 0 ease 0
  transition-duration 时长为0，不会产生过渡效果
  改变多个css属性的过渡效果时：
  a{ transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}

transition-property
transition-property: none |all |property;
值为none时，没有属性会获得过渡效果，值为all时，所有属性都将获得过渡效果，值为指定的css属性应用过渡效果，多个属性用逗号隔开。

transition-duration
transition-duration：time;
该属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间，就是续时间

transition-timing-function
transition-timing-function：linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
该属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，解释下：
值cubic-bezier(n,n,n,n)可以中定义自己的值，如 cubic-bezier(0.42,0,0.58,1)

transition-delay
过渡效果开始前的延迟时间，单位秒或者毫秒

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: background;
  transition-property:background;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
      transition-delay:.18s;
}
div:hover {
  background: #000;
}