首先界面是二维的但也可以有三维的效果。先了解浏览器兼容性问题,火狐加前缀(-moz-)IE加(-MF-)谷歌加(-webkit),简单介绍css3的几个属性。

对于背景来说如果是单纯着一种颜色可以会单调,css3支持对html元素进行梯度着色(gradient)包括线性(linear)的和环状(radial)的。

div{

background:-moz-linear-gradient(blue,red);/*默认的梯度方向是从上往下由蓝色逐渐变红*/

}

     div{

background:-moz-linear-gradient(left top,blue,red);/*从左上角开始梯度变化*/

}

     div{

background:-moz-linear-gradient(90deg left,blue,red 50%);/*从一半时开始红色*/

}

    div{

background:-moz-radial-gradient(blue,red);/*默认的梯度方向是从内到外由蓝色逐渐变红*/

}

关于环状其余的和线性的相似不过环状多了个重复变化可形成条状花纹background:-moz-repeating-radial-gradient(circle,black ,black 10px,white 10px,white 20px););

css3学习笔记一的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  3. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  4. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  5. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  6. HTML5+CSS3学习笔记(一)

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

  7. CSS3学习笔记——伪类hover

    最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示”    ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...

  8. css3学习笔记三

    css3有些特殊的元素选择器这和jquery相似.效果图如下

  9. 我的CSS3学习笔记

    1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...

  10. HTML5+CSS3学习笔记(一) 概述

    HTML5+CSS3概述      HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...

随机推荐

  1. 在CentOS/RHEL 6.4上安装Chromium

    是的,之前Google就说了,由于CentOS/RHEL 6已经是过期的系统,所以不再会有Chrome了.虽然后来由于引起了社区的抗议,从而改口,不再提CentOS/RHEL 6是过期系统了:但是,目 ...

  2. H5 开发中常见的小问题

    1.解决 浏览器 返回按钮不刷新的问题 window.onpageshow = function(event) { if (event.persisted) { window.location.rel ...

  3. mac 下安装php7.1 memcache扩展

    1.下载memcache源代码文件 https://github.com/websupport-sk/pecl-memcache/archive/php7.zip 文件夹名为:pecl-memcach ...

  4. c语言输出控制符

    c语言格式输出 %d 10进制 %f 浮点型输出 %lf 长浮点型输出 %c 字符输出 %s 字符串输出 %o 八进制输出 %x 十六进制输出 %p 16进制,一般输出地址 %e 科学计数法输出 %m ...

  5. 将CSV文件导入到hive数据库

    将csv文件导入hive后出现了所有的字段只显示在新建的表的第一个字段中,后面的字段全是null. 出现这种的原因是hive以行分隔数据,需要修改为按逗号'  ,  ‘ 进行分隔读取, 具体操作如下, ...

  6. python+soket实现UDP协议的客户/服务端中文聊天程序

    没什么特别的东西,网上烂大街的C/S框架.(基于windows 7 + python 3.4) 为了实现中文聊天,我加入了一点修改: msg.encode('utf-8') # msg 为输入(且将要 ...

  7. 22-[模块]-hashlib

    1.HASH Hash,一般翻译做“散列”,也有直接音译为”哈希”的,就是把任意长度的输入(又叫做预映射,pre-image),通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩 ...

  8. CSS快速入门-盒子模型

    一.CSS盒子模型概述 css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素. con ...

  9. net 快速打印日志

    System.IO.File.AppendAllText(@"F:WriteText.txt", "日志内容“+"\r\n");

  10. c# url链接转成二维码图片,再转成byte[]二进制流,输出到前段ajax

    需要用到的 dll 添加引用 代码: //获取配置文件设置的url string urllink = ConfigurationManager.AppSettings["urllink&qu ...