CSS3圆角、rgba
CSS3圆角
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px; 此时为椭圆角
border-top-left-radius:30px; 此时为正圆角
同时分别设置四个角： border-radius:30px 60px 120px 150px; 此时为正圆角。
设置四个圆角相同：
border-radius:50%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:300px;
height:300px;
border:3px solid #000;
background-color:gold;
margin:50px auto 0;
border-top-left-radius:60px;
border-top-right-radius:100px;
}
.box1{
width:300px;
height:300px;
border:3px solid #000;
background-color:gold;
margin:50px auto 0;
border-bottom-left-radius:150px;
border-top-right-radius:150px;
}
.box2{
width:300px;
height:300px;
border:3px solid #000;
background-color:gold;
margin:50px auto 0;
/* border-radius:150px; */
border-radius:50%;
}
</style>
</head>
<body>
<div class="box"></div>
<!--左上角为半径60的正圆角，右上角为半径100的正圆角-->
<div class="box1"></div>
<!--左下角，右上角为半径150的正圆角-->
<div class="box2"></div>
<!--四个角都为半径150的正圆角，即半径边长的一半，故结果为一个正圆-->
</body>
</html>
rgba（新的颜色值表示法）
1、盒子透明度表示法：
.box
{
opacity:0.1;
/* 下行兼容IE ，数值为上一行的100倍*/
filter:alpha(opacity=10);
}
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background:url(images/banner01.jpg);
}
.box{
width:300px;
height:100px;
background-color:#000;
color:#fff;
font-size:30px;
text-align:center;
line-height:100px;
/* 元素透明的完整写法,下边第二行兼容IE */
opacity:0.3;/*数值越小越透明*/
filter:alpha(opacity=30);
}
.box2{
width:300px;
height:100px;
background-color:rgba(0,0,0,0.3);/*只设置背景色透明，不会影响文字的显示效果*/
color:#fff;
font-size:30px;
text-align:center;
line-height:100px;
margin-top:50px;
}
</style>
</head>
<body>
<div class="box">这是一个div</div>
<div class="box2">这是第二个div</div>
<!--box1设置盒子整体透明，会影响文字的显示效果。box2只设置背景色透明，不会影响文字的显示效果-->
</body>
</html>
