1>RGBA透明度：在RGB上设置了Alpha透明值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3新增属性</title>
<style type="text/css">
div{
font-size: 20px;
width: 50px;
/*设置整个div不透明度*/
/*opacity: 0.6;*/
}
.test1{
background-color: rgba(255,0,0,1);
}
.test2{
background-color: rgba(255,0,0,0.8);
}
.test3{
background-color: rgba(255,0,0,0.6);
}
.test4{
background-color: rgba(255,0,0,0.4);
}
.test5{
background-color: rgba(255,0,0,0.2);
}
</style>
</head>
<body>
<div class="test1">1111</div>
<div class="test2">2222</div>
<div class="test3">3333</div>
<div class="test4">4444</div>
<div class="test5">5555</div>
</body>
</html>
界面效果图
2>块阴影与圆角阴影
box-shadow(标签块阴影)/text-shadow（文字块阴影）
border-radius 圆角
border -image 边框图片
形变：
transform:none | <transform - function>[<transform-fuction>]
看网址：http://www.w3school.com.cn/h.asp
盒子模型
网页上的每一个标签都是一个盒子
每个盒子都有四个属性：
1.内容 content
盒子装的东西（常指文字和图片）
2.边框 border：盒子本身
3.填充，内边距 padding
4.边界 ，外边距 margin
标准的盒子模型，每一个网页审查元素都可以看到这样的模型
微软的IE盒子模型，差别在于内容的宽高规格不一样
只截图，用法看W3C教程网
内容的属性介绍
内边距的属性
内边距的实例
border边框属性
外边距的属性
网友评论