您的位置:首页> 日志> 前端技术 正文
DTOP

几种常用CSS3样式

NoyaHua | 2013年12月24日 |

>>收藏本文 已有 1条评论

  在我们日常工作中,由于考虑到浏览器的兼容性,所以很少用CSS3样式。关于其标准,W3C 仍然在对 CSS3 规范进行开发。不过,现代浏览器已经实现了相当多的 CSS3 属性。最近学习了CSS3,发现功能确实很强大,当然它的内容比较的多,目前我学习到的也是一些基础的内容,下面总结了一下几种我们比较常用的样式。1、如图所示

一个倾斜的图片,有描边有投影,在我们CSS2的时候,可能实现比较麻烦,在css3中就比较容易的实现了,以下是我们所需要的样式:
 

  1. div.rotate_img
  2. {width:200px;
  3. padding:10px;
  4. border:1px solid #BFBFBF;
  5. background-color:white;
  6. box-shadow:2px 2px 3px #aaaaaa;
  7. -ms-transform:rotate(7deg); /* IE 9 */
  8. -moz-transform:rotate(7deg); /* Firefox */
  9. -webkit-transform:rotate(7deg); /* Safari and Chrome */
  10. -o-transform:rotate(7deg); /* Opera */
  11. transform:rotate(7deg);

所用到的CSS3样式有,阴影:box-shadow;图片旋转:transform:rotate(7deg); 其中还有在各个浏览器的写法。值 rotate(7deg); 把元素顺时针旋转 7 度。

这里我们用box-shadow给图片加了一个投影,在CSS3中,新增了text-shadow:文字投影您能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色:

  1. h1{text-shadow: 5px 5px 5px #FF0000;}

2、 CSS3 圆角边框
在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。在 CSS3 中,创建圆角是非常容易的。在 CSS3 中,border-radius 属性用于创建圆角: border-radius:10px;
如图

  1. .demo01{
  2. border:2px #999 solid;
  3. border-radius:10px;
  4. -webkit-border-radius:10px;
  5. -moz-border-radius:10px;
  6. width:160px;
  7. height:120px;

3、CSS3 的过渡

通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

CSS3 过渡(鼠标指向这)

  1. .animated_div {
  2. background: #92B901;
  3. border-radius: 5px;
  4. color: #FFFFFF;
  5. height: 40px;
  6. opacity: 0.4;
  7. padding: 20px 10px 0;
  8. transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
  9. transition-property: width, height, transform, background, font-size, opacity;
  10. width: 65px;
  11. .animated_div:hover {
  12. background: #1EC7E6;
  13. font-size: 16px;
  14. height: 60px;
  15. opacity: 1;
  16. transform: rotate(360deg);
  17. width: 90px;