HTML应用开发基础篇 - CSS3 新增特效

最新推荐文章于 2023-04-16 11:54:34 发布

来者不是客

最新推荐文章于 2023-04-16 11:54:34 发布

阅读量630

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43305922/article/details/103828429

版权

本文介绍了CSS3中的一些新增特效，包括边框效果（如圆角、阴影）、文字阴影、transform属性、图标字体的使用、动画的创建以及响应式布局的实现方法。通过实例展示，帮助开发者更好地理解和应用这些特性。

摘要由CSDN通过智能技术生成

1、边框效果

1）、圆角属性

border-radius ，赋值顺序是上、右、下、左。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height: 100px;
				border: 1px solid black;
				margin: 4px;
			}
			div:nth-of-type(1){
				border-radius: 12px 13px 14px 5px;
			}
			div:nth-of-type(2){
				border-radius: 22px ;
			}
			div:nth-of-type(3){
				border-radius: 22px 50px;
			}
			div:nth-of-type(4){
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

2）、边框阴影

box-shadow : 水平阴影垂直阴影羽化值阴影大小阴影颜色阴影类别（内部inset|外部outset）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:300px;
				height:100px;
				background-color:coral;
				box-shadow: 10px 10px 5px 1px gray;} 
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

做几个图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height: 100px;
				border: 1px solid black;
				margin: 4px;
			}
			div:nth-of-type(1){
				background: red;
				border-radius: 10%;
				box-shadow: 10px 10px 5px 2px gray;
			}
			div:nth-of-type(2){
				border:0px;
				border-bottom: green solid 50px;
				border-radius: 0px 0px 100px 0px;		
				-webkit-transform: scale(0.3,0.3);		
			}
			div:nth-of-type(3){
				width: 0px;
				height: 0px;
				/*background: blue;*/
				
				/*transparent : 表示背景透明*/
				border-top:30px solid transparent;
				border-left:30px solid red;
				border-bottom:30px solid transparent;
				border-right:30px solid transparent;
				-webkit-transform: scale(0.3,0.3);
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

演示结果如下：