当前位置: article > 正文

CSS3圆角-透明操作-动画效果_css圆角半透明

作者：IT小白 | 2024-05-13 15:25:16

踩

css圆角半透明

CSS3

一、CSS3圆角

设置某一个交的圆角，比如设置左上角的圆角:
```
border-top-left-radius:30px 0px;
1
```
同时设置四个角:
```
border-radius:30px 60px 120px 50px;
1
```
如果四个角相同的话:
```
border-radius:50%
1
```

举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3圆角</title>
	<style type="text/css">
		.box{
      
			width: 300px;
			height:300px;
			margin:50px auto 0;
			background-color: gold;
			border:2px solid #000;
			

			/* 
				60px为弧线
				两个一样的话可以省略一个60px
				border-top-left-radius: 60px 60px;
				border-top-left-radius: 60px; -- 左上
				要是话一个正圆的话可以用：border-radius:50%;
				四个角都用的话可以用:border-radius:10px ;

			*/
			border-top-left-radius: 60px;
			border-top-right-radius: 50px;
		}

		.box1{
      
			width: 300px;
			height:300px;
			margin:50px auto 0;
			background-color: gold;
			border:2px solid #000;
			/* 
				两个值的话：第一个为左上和右下
			*/
			/*border-radius: 60px 10px;*/
			border-radius: 50%;  /*---正圆*/
		}

		.box2{
      
			width: 300px;
			height:300px;
			margin:50px auto 0;
			background-color: gold;
			border:2px solid #000;
			/*右上和左下*/
			border-top-right-radius: 250px;
			border-bottom-left-radius: 200px;
		}

	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box1"></div>
	<div class="box2"></div>
	
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

效果：.
在这里插入图片描述

二、rgba(新的颜色值表示法)

盒子透明度的设置方法一：

.box{
     
	opacity:0.1;
	/* 兼容IE */
	filter:alpha(opacity=10);
}
1
2
3
4
5
6

盒子透明度的设置方法二：
rgba中的a为透明的设置
```
background-color: rgba(0,0,0,0.1);
1
```

举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>透明</title>
	<style type="text/css">
		body{
      
			background: url(images/banner01.jpg)
		}
		/*透明度写法一*/
		.box{
      
			width: 300px;
			height1
2
3
4
5
6
7
8
9
10
11
12
13
14

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】