用CSS3画Icon(WebkitOnly)

顺晟科技

2021-07-31 07:32:13

196

看到朱一那个用CSS做Icon的Blog( http://zyiangel.blogbus.com/logs/163538656.html )
于是我就手痒也用CSS3做一个,因为用了一下哦webkit的专有属性,而其他浏览器还没有支持所以暂时为WebKitOnly
效果如下:

Demo http://hcg.im/demo/icon.html

代码

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Css3IconWebkitOnly</title>
  <style type="text/css">
    .icon{
      width:320px;
      height:300px;
      background-image:url(1.jpg);
      -webkit-border-radius: 10px;
      -webkit-box-reflect: below 2px -webkit-gradient(linear, 0 0, 0 150%, from(transparent), color-stop(.5, transparent), to(white));
    }
    .icon::after{
      content:'';
      position: absolute;
      width:320px;
      height:300px;
      background:-webkit-gradient(linear,0% , 50% 10%, from(rgba(255,255,255,0)), to(rgba(255,255,255,0.8)));
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="icon"></div>
</body>
</html>

转自：H黑科技

上一篇：更简洁的 CSS 清理浮动方式下一篇：很酷的 CSS3 导航按钮