首先界面是二维的但也可以有三维的效果。先了解浏览器兼容性问题,火狐加前缀(-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. dategate的用法

    菜鸟教程上的说法是这样: delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适 ...

  2. 易语言中锐浪报表绿色发布指南(免COM组件DLL注册)

    第一步 打开易语言开发环境(注要求易语言版本 v5.5及以上版本,如果版本太低,请更新到新版本),点击[工具]菜单,进入系统配置界面: 第二步 切换选择夹到[存根]项目,选中"使用用户自定义 ...

  3. R语言学习笔记(二十二):字符串处理中的函数对比(代码实现)

    字符串处理中基本函数的使用 R自带函数与stringr包函数对比 > states <- row.names(USArrests) > # 提取字符串子集 > substr(x ...

  4. JavaWeb基础—CSS学习小结

    重点记忆:四种结合方式 三种基本选择器 1.CSS:层叠样式表 相当于皮肤 提高了可维护性.样式与内容分离(注释格式/* */) 2.CSS与HTML结合的四种方式:内联式.嵌入式.外部式  1.每个 ...

  5. Openstack入门篇(十八)之Cinder服务-->使用NFS作为后端存储

    1.安装cinder-volume组件以及nfs [root@linux-node2 ~]# yum install -y openstack-cinder python-keystone [root ...

  6. 洛咕 P3965 [TJOI2013]循环格

    同tjoi2010 打扫房间,每个点入度,出度都为1,可以向相邻4个点连边,但只有原来存在的边费用为0. // luogu-judger-enable-o2 #include<bits/stdc ...

  7. P3592 [POI2015]MYJ

    P3592 [POI2015]MYJ 一道比较烦的区间dp.. 昨天上课讲到了这题,然后就在lg翻到了 然后调了很久很久..... 设\(f[l][r][k]\)为区间\([l,r]\)中,最小值\( ...

  8. C# 面试题 二

    1.进程和线程的区别 进程是系统进行资源分配和调度的单位:线程是CPU调度和分派的单位,一个进程可以有多个线程,这些线程共享这个进程的资源. 2.成员变量和成员函数前加static的作用 它们被称为常 ...

  9. Python 10min系列之面试题解析丨Python实现tail -f功能

    关于这道题,简单说一下我的想法吧.当然,也有很好用的 pyinotify 模块专门监听文件变化,不过我更想介绍的,是解决的思路. 毕竟作为面试官,还是想看到一下解决问题的思路,而且我觉得这一题的难点不 ...

  10. int类型转换的几种方式差异

    1.(int)是一种类型转换:当我们觟nt类型到long,float,double,decimal类型,可以使用隐式转换,但是当我们从long类型到int类型就需要使用显式转换,否则会产生编译错误. ...