(ಥ_ಥ) 啊啊,我的胃好疼啊。感觉最近胃又开始不舒服了。啊——果然老了呢,想当初,我也是不坏金刚之身来着呢,唉,我的可怜的小胃胃 (ಥ_ಥ)
记录几个已经常见的不能再常见的css3样式。
一、方框的阴影,box-shadow
E{
box-shadow: inset horizontal vertical blur spread color;
}
参数解释:
inset:可选。关键字。用于设置阴影位于元素内部还是外部,若未指定inset,阴影会位于外部。
horizontal:必选。长度值。设置阴影远离方框的水平距离。
vertical:必选。长度值。设置阴影远离方框的垂直距离。
blur:可选。长度值。设置模糊半径。
spread:可选。长度值。设置阴影扩散距离。正数让阴影比元素更大,负数让阴影比元素更小。
color:在webkit中,必选。在Firefox和Opera中,可选。若没有指明,color默认为黑色。
二、颜色与不透明度,opacity和rgba
1、使用opacity属性设置透明度,其语法格式如下:
E{
opacity: 0.5;
}
opacity属性值取0.0-1.0之间。0为透明,1为不透明。
opacity属性会被他的所有子元素继承。子元素,子元素,注意,不是孙子元素,不是所有后代,只有儿子!
这是HTML代码,查看使用opacity与不使用该属性的区别。
<div class='box'>
<div class='text'>
<p>南硕!我最喜欢的CP!</p>
</div>
</div>
首先是不使用,及其效果图:
.box{
background: url('../最后终于结婚.jpg');
padding:5px;
}
.text{
background:white;
}
p{
color: black;
}
不使用的效果图:
注意,opacity属性添加在其父元素上,添加在爷爷上面不会有继承。
.box{
background: url('../最后终于结婚.jpg');
padding:5px;
/* opacity:0.3; */
}
.text{
background:white;
opacity:0.3;
}
p{
color: black;
}
效果图:
其实这种效果并不是我们通常要的。因为让p里面的字,本来是黑色,也都变成有透明度的黑色了。
2、Alpha通道展示颜色。
CSS3引入Alpha作为RGBA颜色模型中的一个值。RGBA代表red、green、black和Alpha。使用方法与RGB类似,只是多了一个Alpha值。
rgba与opacity的区别:
(1)rgba是一个颜色值,所以无法用它去改变背景的不透明度。
(2)rgba只能应用在它指定的元素上,子元素可以否决所有的继承。
p{
color: black;
} .box1{
background: url('../最后终于结婚.jpg');
padding:5px;
/* opacity:0.3; */
}
.text1{
background-color:rgba(255,255,255,0.3);
}
对比一下,上面是用opacity属性,下面是用rgba属性。opacity中的p元素继承了透明度,而rgba里面的p元素没有继承透明度。
box-shadow与rgba相结合使用:
.box{
background: url('../复杂.jpg');
padding:5px;
}
p{
font-weight:;
text-shadow:5px 5px rgba(0,0,0,0.4)
}
效果图: