常用CSS3

(ಥ_ಥ)    啊啊，我的胃好疼啊。感觉最近胃又开始不舒服了。啊——果然老了呢，想当初，我也是不坏金刚之身来着呢，唉，我的可怜的小胃胃   (ಥ_ಥ) 

 

记录几个已经常见的不能再常见的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: 600;
    text-shadow:5px 5px  rgba(0,0,0,0.4)
}

 

效果图：

 

 

转载于:https://www.cnblogs.com/qingshanyici/p/10554808.html