自定义字体
实例如下
@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>