前端基础知识学习---CSS3学习（五）新增UI样式

自定义字体

实例如下

@font-face {
    font-family:;
    src: url();
}

新增UI方案

文本新增样式

opacity：改变透明度

#warp{
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background: pink;
    opacity: 0.1;
}
#inner{
    width: 100px;
    height: 100px;
    background: deeppink;
}

<div id="warp">
    <div id="inner">
        inner
    </div>
</div>

新增颜色模式rgba

#warp{
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background: rgba(0,0,0,.8);
}

说明：rgba其实就是rgb颜色加一个透明度

实例，背景透明，文字不透明

#warp{
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background: rgba(0,0,0,0.8);
    color: #FFFFFF;
    font-size: 30px;
    line-height: 300px;
    text-align: center;
}

如果是文字透明，背景不透明，将color换成rgba,background使用#形式的颜色模式

文字阴影

text-shadow用来为文字添加阴影，而且可以添加多层，阴影之间用逗号隔开（多个阴影时，第一个在最上面）

h1{
    text-align: center;
    font: 100px/200px "微软雅黑";
    text-shadow: gray 10px 10px 10px;
}

实例-浮雕文字

h1{
    text-align: center;
    font: 100px/200px "微软雅黑";
    color: white;
    text-shadow: black 1px 1px 10px;
}

实例-文字模糊效果

h1{
    text-align: center;
    font: 100px/200px "微软雅黑";
    color: black;
    transition: 1s;
}
h1:hover{
    color: rgba(0,0,0,0);
    text-shadow: black 0 0 100px;
}

实例-模糊背景

#warp{
    height: 100px;
    background: rgba(0,0,0,.5);
    position: relative;
}
#warp #bg{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: url(img/2_1.jpg) no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    filter: blur(10px);/*元素模糊*/
}
img{
    margin: 24px 0 0 24px;
}

<div id="warp">
    <img src="img/2_1.jpg" width="64" height="64" />
    <div id="bg"></div>
</div>