【CSS】CSS 高级技——CSS画图

来源：互联网发布：网上买鲜花知乎编辑：程序博客网时间：2024/05/21 11:19
<!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-index: 1;}.app:before {content:'';position: absolute;border-width:70px;border-style: solid;border-color: #333 transparent transparent transparent;top:50%;left:0;opacity:.4;filter:alpha(opacity="40");-webkit-transform:rotate(45deg) scale(1) skew(0deg) translate(-28px, 71px);}.app:hover {color:#000;text-shadow:0 1px 2px #fff;background:-webkit-radial-gradient(right top, #f88cff, #3fbe69, #f88cff,#e9c474);background:-moz-radial-gradient(right top, #f88cff, #3fbe69, #f88cff,#e9c474);-webkit-transition:all .4s ease-in;-moz-transition:all .4s ease-in;transition:all .4s ease-in;cursor:pointer;}/*.box{width:100px;padding:60px;background: rgba(60, 60, 60, .6);margin:0 auto;border-radius: 10px;-webkit-transform:rotate(45deg) scale(1) skew(0deg) translate(-150px, -50px);-moz-transform:rotate(30deg) scale(.3) skew(30deg) translate(-0px);-ms-transform:rotate(30deg) scale(.5) skew(20deg) translate(-30px);z-index: 0;}*/.bagua {position: relative;width:96px;height:48px;border:2px solid #f00;border-bottom-width:50px;border-radius: 50%;background: #eee;}.bagua:before {content:'';position: absolute;width:10px;height:10px;top:50%;left:0;border:19px solid #f00;border-radius: 50%;background: #eee;}.bagua:after {content:'';position: absolute;width:10px;height:10px;top:50%;left:50%;border:19px solid #eee;border-radius: 50%;background: #f00;}.search {position: relative;width:40px;height: 40px;margin:50px auto;background: #333;border:8px solid #fff;border-radius: 50%;box-shadow: inset 0 0 40px #000, 3px 3px 0 rgba(0, 0 ,0, .4);}.search:after {content:'';position: absolute;width:38px;height: 12px;left:100%;top:85%;border-radius: 0 35% 35% 0;background: #fff;box-shadow: 7px 3px 0 rgba(0, 0 ,0, .4);-webkit-transform:rotate(30deg);   -moz-transform:rotate(30deg);     -ms-transform:rotate(30deg);        -o-transform:rotate(30deg);}.tv {position: relative;width:100px;height: 70px;margin:0 auto;border:8px solid #412702;border-top-width: 12px;border-bottom-width: 20px;border-radius: 50%/10%;background: #f00;box-shadow: inset 0 0 10px rgba(66, 56, 56, .5), inset 0 0 2px -1px #000;color:#8b5200;}.tv:before,.tv:after {content:'';position: absolute;width:38px;height: 12px;left:50%;top:100%;border-radius: 0 35% 35% 0;background: #412702;-webkit-transform:rotate(90deg) translate(32px);   -moz-transform:rotate(90deg) translate(28px);     -ms-transform:rotate(90deg) translate(18px);        -o-transform:rotate(90deg) translate(18px);}.tv:after {left:12%;}.tv span {display: block;position: absolute;width:100%;top:100%;left: 0;text-align: center;line-height: 9px;text-shadow:1px 1px 0 #000;}</style></head><body><div class="app">APP / Store</div><!-- <div class="box"></div> --><div class="wrapper"><div class="bagua"></div><div class="search"></div><div class="tv"><span>。。。</span></div></div></body></html>
纯CSS进行简单的画图操作，八卦图是昨天网上看到的资源，其它为原创，效果如下图：
遗憾的是所有版本的IE都不支持背景渐变，八卦图也有边线，所以建议在chorme / firefox等浏览器下预览
1 0