opacity属性指定了一个元素的透明度
默认值：1.0 不可继承 兼容性不是太好
兼容性写法
opacity{ opacity:0.5; filter:alpha(opacity=50); //filter 过滤器 兼容IE678 }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 300px;
height: 300px;
margin: 100px auto;
background: pink;
opacity: 0.5;
filter:alpha(opacity=50);
}
#inner{
width: 100px;
height: 100px;
background: deeppink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
inner
</div>
</div>
</body>
</html>rgba 颜色英文字符转换
#wrap{ width: 300px; height: 300px; margin: 100px auto; background: rgba(0,0,0,.8); }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 300px;
height: 300px;
margin: 100px auto;
background: rgba(0,0,0,.8);
}
</style>
</head>
<body style="background: url(img/zdy.jpg);">
<div id="wrap">
</div>
</body>
</html>rgb 背景颜色透明度
background: rgb(100,100,100);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 300px;
height: 300px;
margin: 100px auto;
background: rgb(100,100,100);
color: rgba(255, 255, 255,.5);
font-size: 30px;
line-height: 300px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
我是wrap
</div>
</body>
</html>text-shadow 文字阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
h1{
text-align: center;
font: 100px/200px "微软雅黑";
text-shadow:10px 10px 10px gray,pink 20px 20px 20px;
}
</style>
</head>
<body>
<h1>尚硅谷</h1>
</body>
</html>text-shadow: black 1px 1px 100px; 浮雕文字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
h1{
text-align: center;
font: 100px/200px "微软雅黑";
color: white;
text-shadow: black 1px 1px 10px;
}
</style>
</head>
<body>
<h1>博客园</h1>
</body>
</html>text-shadow ：文字模糊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
h1{
text-align: center;
font: 100px/200px "微软雅黑";
color: black;
transition: 1s;
}
h1:hover{
color: rgba(0,0,0,0);
text-shadow: black 0 0 200px;
}
</style>
</head>
<body>
<h1>博客</h1>
</body>
</html>模糊背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
height: 100px;
background: rgba(0,0,0,.5);
position: relative;
}
#wrap #bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url(img/avatar.jpg) no-repeat;
background-size:100% 100% ;
z-index: -1;
filter: blur(10px);
}
img{
margin: 24px 0 0 24px;
}
</style>
</head>
<body>
<div id="wrap">
<img src="img/avatar.jpg" width="64px" height="64px"/>
<div id="bg"></div>
</div>
</body>
</html>-webkit-text-stroke:pink 4px; 文字描边
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> h1{ font:100px/200px "微软雅黑"; text-align:center; color:white; -webkit-text-stroke:pink 4px; } </style> </head> <body> <h1>尚硅谷</h1> </body> </html>
direction:rtl;
unicode-bidi:bidi-override； 文字排版
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div{ width: 200px; height: 200px; border: 1px solid; margin: 0 auto; direction:rtl; unicode-bidi:bidi-override; } </style> </head> <body> <div>博客园</div> </body> </html>
text-overflow: ellipsis; 溢出显示省略号
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div{ width: 200px; height: 200px; border: 1px solid; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div>尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷</div> </body> </html>