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

最新推荐文章于 2022-11-06 19:49:17 发布

V-Sugar

最新推荐文章于 2022-11-06 19:49:17 发布

阅读量601

点赞数

分类专栏：前端文章标签： css css3 html animation

本文链接：https://blog.csdn.net/weixin_43844838/article/details/107238736

版权

CSS3

一、CSS3圆角

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

举例：

<!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>

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

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

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

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

盒子透明度的设置方法二：
rgba中的a为透明的设置
```
background-color: rgba(0,0,0,0.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;
			height:100px;
			background-color: #000;
			color:gold;
			font-size: 30px;
			text-align: center

最低0.47元/天解锁文章

V-Sugar

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3圆角-透明操作-动画效果

CSS3一、CSS3圆角二、rgba(新的颜色值表示法)三、transition动画四、transform变换五、animation动画1.解释2.风车旋转的实例3.登录中的loading动画
复制链接

扫一扫

专栏目录