css立体效果代码实例
分类：实例代码
本章节分享一段代码实例，它实现了简单的立体效果。
此效果应该在实际应用中很少出现，但是可以开阔一下思路。
立体效果是通过元素的边框实现的，其实很多三角形效果就是利用这个原理。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.antzone {
border-left: #023060 10px solid;
border-right: #366AA1 10px solid;
border-top: #0F2E4E 10px solid;
border-bottom: #548CC7 10px solid;
width: 120px;
margin: 0px auto;
text-align: center;
font-size: 12px;
line-height: 22px;
color: #bbdcff;
background-color: #194D83;
}
</style>
</head>
<body>
<div class="antzone">前端教程网</div>
</body>
</html>
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu