程序员的自我修养
Home » 前端 » 一些有用的CSS3属性

一些有用的CSS3属性

2条评论2,000次浏览

最近点错了技能点,点到css3上去了。然后终于算是比较系统化的完成了一套样式的设计。没错就是现在博客用到的样式,除了惯性式的背景流动效果外,其它的绝大部分都是我自己通过撞大运式编程弄出来的。

这套样式翻来覆去的就用到了几种css3属性,感觉十分有用,在此记录下来。

transition

transition,动画效果(反正我是这么理解的)属性。例如博客现在样式中的:

  • 超链接的颜色,蓝色变成金黄色
  • 按钮的颜色
  • 文章的边框阴影
  • sidebar中的效果,向右移动,背景变化

使用方法

超链接颜色变化+字体大小变化

这样当鼠标放在a元素上边时(hover),就会发生颜色和字体大小的变化,时间长度都为500ms。

border-radius

border-radius,边框圆角属性。例如博客现在样式中的:

  • 文章的边框
  • 按钮的边框

使用方法

class=post的边框变为圆角。

一般为了浏览器兼容性,会加上主流浏览器的私有属性,如下

  • -moz代表firefox浏览器私有属性
  • -ms代表IE浏览器私有属性(建议放弃IE)
  • -webkit代表chrome、safari私有属性
  • -o代表opera私有属性

box-shadow

box-shadow,阴影属性。例如博客现在样式中的:

  • 文章的边框阴影

使用方法

参数分别代表:水平阴影的位置、垂直阴影的位置、模糊距离、阴影的颜色。

背景透明

下面代码用来定义一个黑色(#000000,rgb(0,0,0))的背景,同时设置透明度为0.1(0为完全透明,1为完全不透明)。

线性渐变

如“线性渐变”这个标题采用的css样式为:

意思大概可能好像是,渐变从右向左,颜色是rgba(255,255,255,0.15)(本身就是一个透明的颜色),起始点的透明度为100%,结束点的透明度为0。

最后

差不多就用了这些css3的属性就完成了现在的博客样式,其它的属性大都是一些常用的css属性,比如什么margin、padding的在此就不说了。

啥?你说IE下看不到效果?IE下啥都看不到才是正常的,用IE浏览本博客电脑会爆炸!

最后,再弄样式什么的剁手!!

(转载本站文章请注明作者和出处 程序员的自我修养 – SelfUp.cn ,请勿用于任何商业用途)
分类:前端
标签:
2条评论
  1. ashley说道:

    风格越来越灵异了 不错啊~

发表评论


profile
  • 文章总数:79篇
  • 评论总数:280条
  • 分类总数:31个
  • 标签总数:44个
  • 运行时间:1130天

大家好,欢迎来到selfup.cn。

这不是一个只谈技术的博客,这里记录我成长的点点滴滴,coding、riding and everthing!

最新评论
  • 张瑞昌: 有很多,比较常见的是Jacob迭代法,一次迭代O(n^3), 迭代次数不清楚。 如果是手动算的话按照定义求就可以了
  • Anonymous: :mrgreen:
  • lc277: 你好 我想问下一般删除节点要多久,要删除的datanode大概用了 1t,解除授权已经30多小时还没完成,请问是出现什么问题了吗 麻烦告诉下谢谢 qq1844554123
  • Anonymous: 你好 我想问下一般删除节点要多久,要删除的datanode大概用了 1t,解除授权已经30多小时还没完成,请问是出现什么问题了吗
  • Anonymous: :smile: :grin: :eek:
  • 李雪璇: 想要完整代码,可以帮忙发给我吗
  • Anonymous: 请问一下,那个 user的推荐结果楼主查看了么? 为什么输入数据 最高是五分,输出结果都是7分8分啥的?怎么设置输出的分数的最 大值?
  • Anonymous: 那个 user的推荐结果楼主查看了么? 为什么输入数据 最高是五分,输出结果都是7分8分啥的?
  • Anonymous: stopGracefullyOnShutdown在yarn- client模式下我测试的无效,你的呢
  • Anonymous: 另外,import的lib包能否发个列表.
  • Anonymous: 部分程序已经无法使用, 另外 你的import代码 也应该放上来哈
  • wzq: 赞
  • 增达网: 受教了!呵呵!
  • Anonymous: :!: :smile: :oops: :grin: :eek: :shock:
  • 27: :razz: dsa会报错,rsa不会
  • Anonymous: 看错了 忽略我
  • Anonymous: UserSideCF这个类在哪里
  • 晴子: 在主节点初始化CM5数据库的时候报错误:Verifying that we can write to /opt/cm-5.9.0/etc/cloudera-scm -server log4j:ERROR Could not...
  • zhangnew: 就4题 :?:
  • linxh: “ 但要是遇到预先并不知道数组的长度而又需要获取正确的(或者称之 为原始的)split长度时,该如何处理呢。。? ” 印象中可以split函数参数传-1?