0
点赞
收藏
分享

微信扫一扫

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>




CSS3圆角、opacity 透明度、rgba 背景色设置_背景色_02


先写出一个正方形的div,现在可以准备设置左上角为圆角了。




CSS3圆角、opacity 透明度、rgba 背景色设置_圆角_03


如果只写一个30px,说明上方和左方都是以30px的圆半径。如果按照示例再写一个60px呢?




CSS3圆角、opacity 透明度、rgba 背景色设置_html_04


可以看出,左边的竖线圆的弧度更加大,所以第二个参数就是left的半径60px。

那么现在写好了左上角,那么上下左右又该怎么写呢?




CSS3圆角、opacity 透明度、rgba 背景色设置_圆角_05


嗯,已经写出来效果了。

上面分别写了四个圆角单独写的方式,我们来简化一下。

再来一个同时分别设置四个角: border-radius:30px 60px 120px 150px;




CSS3圆角、opacity 透明度、rgba 背景色设置_圆角_06


如果只写一个参数,那么四个角的弧度都一样。是不是觉得跟margin的写法很相似。




CSS3圆角、opacity 透明度、rgba 背景色设置_html_07


如果写两个参数,那么第一个参数就是左上角和右下角的弧度,第二个参数就是右上角和左下角的弧度。




CSS3圆角、opacity 透明度、rgba 背景色设置_html_08


如果写三个参数,那么第三个参数就是右下角的弧度。




CSS3圆角、opacity 透明度、rgba 背景色设置_圆角_09


如果写四个参数,那么第四个参数就是左下角的弧度。

好了,这样就看出规律来了。就是参数的顺序是以左上角开始,顺时针排序的。

那么如果只想弄个圆形呢?那么只要将四个角的弧度弄成正方形的一半长作为直径就可以啦。

实现设置如下:
​​​border-radius:50%;​




CSS3圆角、opacity 透明度、rgba 背景色设置_圆角_10


rgba(新的颜色值表示法)

1、盒子透明度表示法:

 .box
{
opacity:0.1;
/* 兼容IE */
filter:alpha(opacity=10);
}

接着上面的代码示例,写个透明度的效果来看看,如下:




CSS3圆角、opacity 透明度、rgba 背景色设置_html_11


这种方式有个问题,就是会把div里面的字体一起透明化。下面写一些文字看看。




CSS3圆角、opacity 透明度、rgba 背景色设置_背景色_12


从上图可以看出​​opacity​​​这种方式会将div内的字体一起透明化。那么有没有只让div透明化,但是字体不会透明化呢?
下面再来看看,使用​​​rgba​​的方式。

2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度




CSS3圆角、opacity 透明度、rgba 背景色设置_背景色_13


可以看出,​​rgba​​这种方式就是再设置一个背景色,并且可以控制透明度,而不会去影响文字内容。

现在可以看到第二个div就是一整个黑色,因为设置了 ​​rgba(0,0,0,1)​​。

前三个​​0​​ 就是设置了黑色,最后一个参数 1 就是设置透明度。现在设置为 0.3 看看。




CSS3圆角、opacity 透明度、rgba 背景色设置_背景色_14


设置了透明度为 0.3 之后, div的背景色就变为了灰色,但是不会影响中间的文字颜色。

​​​​ 微信公众号

CSS3圆角、opacity 透明度、rgba 背景色设置_圆角_15

举报

相关推荐

0 条评论