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