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

一些有用的CSS3属性

2条评论1,678次浏览

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

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

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

最新评论
  • 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...
  • Anonymous: ZkUtils.getPartitionsForTopics (zkClient, Config.kafkaConfig.topic) 你确定 kafka 里面有这个类 ? 个人在kafka 最新 稳定版...
  • Anonymous: :roll:
  • Anonymous: 很不错,试问有java版的吗?
  • Anonymous: 赞
  • Anonymous: 哈哈 看楼主的吐槽乐死了 where子句是可以写的 同样找不到资料 一点点试出来的 select id from xxxx where ${CONDITIONS} and 1=1 and 2=2 limit 4
  • EVIL: 我在运行完C4.5的代码后,显示 defined object DecisionTreeTest 是什么意思?这是有错误吗?运行结果在哪里看?
  • sf: 楼主的问题,我都遇到。。。没办法项目已经定型了,最后都硬着头 皮一个一个的改了源码
  • zz: 我去,楼主你真及时,我们今天上了新的HTTP2 push之后也发现速度曲线很奇怪,开始有200k/min,跟 另一台老的推送协议速度差不多,但是过了一会,立马降到只有几k /min,百思不得其解,我们还用了一个海外代理,在...
  • qi365: :mad: 很可恶,百度助纣为虐~
  • qi365: :? :shock: haha~ very good~
  • 张是大: 《深入浅出Spark机器学习实战(用户行为分析)》 课程网盘下载:http://pan.baidu.com/s/ 1mixvUli 密码:1pfn
  • Anonymous: :???:
  • Anonymous: 我用着sqoop感觉还可以,select 几十个字段也没事,估计是版本低。。
  • Anonymous: :grin: