一些有用的CSS3属性 | 程序员的自我修养 | 关注Java、大数据、机器学习
程序员的自我修养
Home » 前端 » 一些有用的CSS3属性

一些有用的CSS3属性

2条评论2,518次浏览

最近点错了技能点,点到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
  • 文章总数:81篇
  • 评论总数:279条
  • 分类总数:32个
  • 标签总数:45个
  • 运行时间:1520天

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

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

最新评论
  • Anonymous: :roll:
  • Anonymous: :razz: :evil: :smile: :grin: :???:
  • Anonymous: 运行报错:java.lang.Abstr actMethodError
  • Anonymous: :arrow:
  • Anonymous: :oops:
  • Anonymous: :smile: :smile: :smile: :smile:
  • Anonymous: :mrgreen: :twisted: :razz:
  • zzg: 请问zz你问题核实了没 我也遇到了这个奇葩 问题,我们也是基...
  • Anonymous: :?: :sad: :evil:
  • kuyuzasur: what do i tell doctor to get viagra. edhelprie.mdhelpserv.com – how long we can take viagra,
  • Anonymous: 这个问题可以忽略。不 影响
  • Anonymous: :?: :razz: :sad:
  • Anonymous: 牛
  • Anonymous: 楼主你好,我偶尔也会 遇到Reconnect due to socket error: java.nio.channels.ClosedCha...
  • Anonymous: sdfs
  • Anonymous: :arrow: :neutral: :cry:
  • Anonymous: java.io.NotSerializableExcepti on: DStream checkpointing has been enabled but the DStreams with their...
  • wick: HI,请问一下,U,S,V得到 ,怎么得到近似矩阵 (用spark java),谢谢。
  • Michael Whitaker: Thank you for this blog, it was very helpful in troubleshooting my own issues. It seems that no...
  • Anonymous: :mad: