css相关

由于不是专业前端,所以没有太多的机会可以练手前端相关的经验。所以在这个博客中记录一下自己对于css了解的一些小例子。

目录:


1 加入圆角阴影半透明。

  /*半透明*/
  opacity: 0.5;
  background-color: #120F0F;

  /*圆角*/
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 20px;

  /*阴影*/
  -webkit-box-shadow: 1px 1px 3px #292929;
  -moz-box-shadow: 1px 1px 3px #292929;
  box-shadow: 1px 1px 20px #10120D;

圆角阴影半透明例子

2 链接下载划线css text-decoration

h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline} h4 {text-decoration:blink}

3 使用transition来使用颜色的逐步变化

目前本博客内的所有的链接都是这样的,可以参考一下:链接参考

a {  
    color: #1982D1;
    transition: color ease 0.3s;
    text-decoration: none;
    -webkit-transition:color .5s ease-in-out;
    -moz-transition:color .5s ease-in-out;
    -o-transition:color .5s ease-in-out;
    transition:color .5s ease-in-out;
}

a:hover {  
    color: orange;
    text-decoration: none;
}


4 每天换一个壁纸
用js在页面初始化时修改背景的style,考虑缓存问题,就每天一个好了。看我的博客的人本来也少,如果有恶意的话再说吧。 所有的壁纸是从搜狗壁纸中下载下来的,目前全是风景的,以后再改成别的。

     var date = (new Date).getDate();
     var backgroundUrl = 'background-image: url(/content/images/myupload/background/desktop' + date +'.jpg)';
     $('header.main-header').attr('style', backgroundUrl);
comments powered by Disqus