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

一些有用的CSS3属性

2条评论1,911次浏览

最近点错了技能点,点到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篇
  • 评论总数:331条
  • 分类总数:31个
  • 标签总数:44个
  • 运行时间:1072天

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

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

最新评论
  • 增达网: 受教了!呵呵!
  • 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?
  • linxh: 班门弄斧一下: ssh host cmd 和直接ssh上后cmd结果不一样是因为ssh直接运行远程命令 是非交互非登录模式与ssh上去得到一个登录交互式Shell二 者加载的环境变量不一样。
  • 匿名: 其实文本分类和数字分类是一样的,只是文本分类需要多一个步骤, 就是计算它的tf-idf值将其转换为double类型
  • yurnom: 可能苹果最近又改变了返回值吧,最近没做测试了。 BadDeviceToken一般测试环境和正式环境弄错的情况 下会出现。
  • Anonymous: :razz: 博主,良心贴啊, 最近也在弄apns推送。 有个问题想请教你一下啊。 你博客中写的 Unregistered 错误,有准确的说明吗, 我看你博客中写的:...
  • 一波清泉: 回复邮箱: 1004161699@qq.com 多谢
  • Anonymous: 17/02/09 01:15:02 WARN Utils: Service ‘SparkUI’ could not bind on port 4040. Attempting port...
  • pacificLee: :twisted:
  • 小码: 为什么没有后面的呢,只有前10个
  • Anonymous: :lol:
  • Anonymous: :razz: 楼主是属于会聊天的。 我想问,sqoop发了几个版本了,应该没这些问题了吧。
  • Anonymous: Config.kafkaConfig.kafkaGroupI d 这个是指自己配置的group id 还是从 import org.apache.kafka.common.config .Config 这个类...
  • Anonymous: ZkUtils.getPartitionsForTopics (zkClient, Config.kafkaConfig.topic) 那个方法是在 spark-streaming_2.10 中 kafka...