<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 高级技——CSS画图</title>
<style>
body {
background: #333
}
.wrapper {
position: relative;
width:500px;
margin:0 auto;
text-align: center;
}
.wrapper div {
display: inline-block;
margin:0 30px;
}
.app {
position: relative;
width:200px;
height:200px;
margin:50px auto;
border-radius: 20px;
box-shadow: 0 0 1px -1px rgba(0,0,0,.5), inset 0 0 15px rgba(0, 0, 0, .3), 1px 3px 6px #000;
text-align: center;
color:#fff;
text-shadow:2px 2px 0px #000;
font: 21px/200px arial;
/*background:-webkit-gradient(linear, 0 0, 100% 0, from(#e9c474), to(#e9c474));*/
background:-webkit-linear-gradient(top left, #e9c474, #3fbdbe, #f88cff,#3fbe69);
background:-moz-radial-gradient(top left, #e9c474, #3fbdbe, #f88cff,#3fbe69);
-webkit-transition:all .4s ease-in;
-moz-transition:all .4s ease-in;
transition:all .4s ease-in;
z-
【CSS】CSS 高级技——CSS画图
最新推荐文章于 2022-05-25 19:07:11 发布
这篇博客探讨了如何使用CSS进行高级的图形绘制,包括原创设计和一个从网络获取的八卦图示例。由于IE浏览器不支持背景渐变,八卦图存在边线问题,推荐在Chrome或Firefox下查看最佳效果。
摘要由CSDN通过智能技术生成