在我们日常工作中,由于考虑到浏览器的兼容性,所以很少用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;

几种常用CSS3样式的更多相关文章

  1. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  2. 对于72种常用css3的使用经验

    对于72种常用css3的使用经验 保存网站源码 目的 保证有足够的css和js文件源码 拿到当前网页的整体布局 本地化 创建web项目 将web项目创建出来 在项目中创建一个文件夹 将所有的js和cs ...

  3. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  4. 11种常用css样式之鼠标、列表和尺寸样式学习

    鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...

  5. 11种常用css样式之border学习

    边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-st ...

  6. 11种常用css样式之background学习

    background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...

  7. 11种常用css样式之开篇文本字体学习

    常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...

  8. 几个常用的CSS3样式代码以及不兼容的解决办法

    原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 CSS3代码: -webkit-border-radius:10px; -moz-border-radiu ...

  9. WPF 几种常用控件样式的总结

    这里把wpf中几种常用样式总结一下,后期可以直接拷贝使用,呵呵 一.Button <ResourceDictionary xmlns="http://schemas.microsoft ...

随机推荐

  1. N76E003的定时器/计数器 0和1

    定时器/计数器 0和1N76E003系列定时器/计数器 0和1是2个16位定时器/计数器.每个都是由两个8位的寄存器组成的16位计数寄存器. 对于定时器/计数器0,高8位寄存器是TH0. 低8位寄存器 ...

  2. PHP域名解析(一个IP绑多域名)----看看可以,并不值得借鉴

    PHP域名解析(一个IP绑多域名)----看看可以,并不值得借鉴 好处当然是不用买多网卡.不用设置其它端口为WEB端口了,一张网卡上.都用同一个80端口建很多网站. 假设有三个域名:     [url ...

  3. 微信JSSDK支付接口-安卓机无法正常调起接口

    今天碰到个问题,是项目调起微信支付接口,苹果机都没有什么问题,但是安卓机的情况就是支付接口出现一下就消失了 试了将error反馈信息弹出来,也就是显示choosewxpay fail 找了半天不知道什 ...

  4. LeetCode-494. Target Sum(DFS&DP)

    You are given a list of non-negative integers, a1, a2, ..., an, and a target, S. Now you have 2 symb ...

  5. 【Eclipse】启动时报错:No Java virtual machine (已解决)

    在 Ubuntu 上下了个最新的 Eclipse ,解压后运行报这样的错误: 当然 JDK 的安装及环境变量的配置是没有问题的.使用 java -version 查询本机的JDK版本是可以的. 如果不 ...

  6. 子页面iframe跨域执行父页面定义的JS方法

    问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...

  7. [转] 基于TINY4412的Andorid开发-------简单的LED灯控制

    阅读目录 一.编写驱动程序 二.编写代码测试驱动程序 三.编写HAL代码 四.编写Framework代码 五.编写JNI代码 六.编写App 参考资料: <Andriod系统源代码情景分析> ...

  8. docker 参数

    -a, --attach=[] Attach to STDIN, STDOUT or STDERR 指定标准输入输出内容类型,可选 STDIN/STDOUT/STDERR 三项 --add-host= ...

  9. C语言位操作--逻辑运算符组合

    假设读者熟悉普通代数与布尔代数,下面是部分常见的涉及到加法.减法与逻辑运算符的组合: a.        -x=~x+1 b.           =~(x-1) c.        ~x=-x-1 ...

  10. MacOS 安装 nginx

    brew install nginx 开机启动 $ sudo cp `brew --prefix nginx`/homebrew.mxcl.nginx.plist /Library/LaunchDae ...