CSS3圆角、opacity 透明度、rgba 背景色设置
CSS3圆角、opacity 透明度、rgba 背景色设置
仅供学习，转载请注明出处
CSS3圆角
设置某一个角的圆角，比如设置左上角的圆角： border-top-left-radius:30px 60px;
二话不说，先写个这个左上角的圆角示例来看看先，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: gold;
margin:50px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
先写出一个正方形的div，现在可以准备设置左上角为圆角了。
如果只写一个30px，说明上方和左方都是以30px的圆半径。如果按照示例再写一个60px呢？
可以看出，左边的竖线圆的弧度更加大，所以第二个参数就是left的半径60px。
那么现在写好了左上角，那么上下左右又该怎么写呢？
嗯，已经写出来效果了。
上面分别写了四个圆角单独写的方式，我们来简化一下。
再来一个同时分别设置四个角： border-radius:30px 60px 120px 150px;
如果只写一个参数，那么四个角的弧度都一样。是不是觉得跟margin的写法很相似。
如果写两个参数，那么第一个参数就是左上角和右下角的弧度，第二个参数就是右上角和左下角的弧度。
如果写三个参数，那么第三个参数就是右下角的弧度。
如果写四个参数，那么第四个参数就是左下角的弧度。
好了，这样就看出规律来了。就是参数的顺序是以左上角开始，顺时针排序的。
那么如果只想弄个圆形呢？那么只要将四个角的弧度弄成正方形的一半长作为直径就可以啦。
实现设置如下：
border-radius:50%;
rgba（新的颜色值表示法）
1、盒子透明度表示法：
.box
{
opacity:0.1;
/* 兼容IE */
filter:alpha(opacity=10);
}接着上面的代码示例，写个透明度的效果来看看，如下：
这种方式有个问题，就是会把div里面的字体一起透明化。下面写一些文字看看。
从上图可以看出opacity这种方式会将div内的字体一起透明化。那么有没有只让div透明化，但是字体不会透明化呢？
下面再来看看，使用rgba的方式。
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
可以看出，rgba这种方式就是再设置一个背景色，并且可以控制透明度，而不会去影响文字内容。
现在可以看到第二个div就是一整个黑色，因为设置了 rgba(0,0,0,1)。
前三个0 就是设置了黑色，最后一个参数 1 就是设置透明度。现在设置为 0.3 看看。
设置了透明度为 0.3 之后， div的背景色就变为了灰色，但是不会影响中间的文字颜色。