HTML学习-13css3圆角和透明色

『Knight』

已于 2022-09-07 10:53:41 修改

阅读量493

点赞数

分类专栏： HTML学习文章标签： html css3 学习

于 2022-09-07 10:53:12 首次发布

本文链接：https://blog.csdn.net/weixin_63204687/article/details/126740454

版权

HTML学习专栏收录该内容

19 篇文章 3 订阅

订阅专栏

一、圆角

1.分别设置四个角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.box{
				width: 300px;
				height: 300px;
				border: 3px solid #000;
				background-color: gold;
				margin: 50px auto 0;
				/* 针对某一个角做圆角 */
				border-top-left-radius: 30px 60px;/* 表示一边为半径30画弧一边为60 */
				border-top-left-radius:60px;/* 表示这个角为60px画的弧 */
				border-top-right-radius:60px ;
				border-bottom-right-radius: 60px;
				border-bottom-left-radius: 60px;
				border-radius: 60px;/* 四个角一句话表示 */
				
			}

		</style>
		<title></title>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

a.讲解

border-top-left-radius: 30px 60px;/* 表示一边为半径30画弧一边为60 */
               border-top-left-radius:60px;/* 表示这个角为60px画的弧 */
               border-top-right-radius:60px ;
               border-bottom-right-radius: 60px;
               border-bottom-left-radius: 60px;
               border-radius: 60px;/* 四个角一句话表示 */

2.画一个圆

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.box1{
				width: 300px;
				height: 300px;
				border: 3px solid #000;
				background-color: gold;
				margin: 50px auto 0;
				/* 如果border-radius正好为宽高的50%则画一个正圆 */
				border-radius: 150px;/* 50%也一样的作用 */
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>

width: 300px;
height: 300px;
/* 如果border-radius正好为宽高的50%则画一个正圆 */
border-radius: 150px;/* 50%也一样的作用 */

3.总结

对于border-radius相当于设置半径，而这个半径可以设置不同方向的比如：border-bottom-left-radius设置左下角。依此类推可以完成四个角的设置，如果四个角都相同则可以直接一句话带过border-radius:60px;而对于如果设置border-radius：50%;则画一个完整的圆。

4.其他资料

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.box{
				width: 300px;
				height: 300px;
				border: 3px solid #000;
				background-color: gold;
				margin: 50px auto 0;
				/* 针对某一个角做圆角 */
				border-top-left-radius: 30px 60px;/* 表示一边为半径30画弧一边为60 */
				border-top-left-radius:60px;/* 表示这个角为60px画的弧 */
				border-top-right-radius:60px ;
				border-bottom-right-radius: 60px;
				border-bottom-left-radius: 60px;
				border-radius: 60px;/* 四个角一句话表示 */
				
			}
			.box1{
				width: 300px;
				height: 300px;
				border: 3px solid #000;
				background-color: gold;
				margin: 50px auto 0;
				/* 如果border-radius正好为宽高的50%则画一个正圆 */
				border-radius: 150px;/* 50%也一样的作用 */
			}
			.box2{
				width: 300px;
				height: 300px;
				border: 3px solid #000;
				background-color: gold;
				margin: 50px auto 0;
				border-top-right-radius: 50%;
				border-bottom-left-radius: 50%;/* 画芒果 */
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="box"></div>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

二、透明度设置

1.设置opacity

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body{
				background: url(./banner01.jpg);
			}
			.box{
				width: 300px;
				height: 100px;
				background-color: black;
				color: aliceblue;
				font-size: 30px;
				text-align: center;
				line-height: 100px;
				opacity: 0.3;/* 设置透明度 */
				/* 兼容IE */
				filter: alpha(opacity=30);/* 字和盒子整体变成0.3的透明度要与之前的相对应30 和 0.3*/
				
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="box">这是一个div</div>
	</body>
</html>

opacity: 0.3;/* 设置透明度 */
/* 兼容IE */
filter: alpha(opacity=30);/* 字和盒子整体变成0.3的透明度要与之前的相对应30 和 0.3*/

虽然opacity进行设置透明度，但是为了兼容IE浏览器所以加filter: alpha(opacity=30);

从图片中可知该方法把背景颜色和字体都进行了透明操作

2.设置rbga

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body{
				background: url(./banner01.jpg);
			}

			.box2{
				width: 300px;
				height: 100px;
				background-color: rgba(0,0,0,0.3);/* 仅背景透明度进行，文字颜色不动 */
				color: aliceblue;
				font-size: 30px;
				text-align: center;
				line-height: 100px;
				margin-top: 50px;
				
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="box2">这个是第二个div</div>
	</body>
</html>