首先界面是二维的但也可以有三维的效果。先了解浏览器兼容性问题,火狐加前缀(-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. KVM虚拟机IO处理过程(二) ----QEMU/KVM I/O 处理过程

    接着KVM虚拟机IO处理过程中Guest Vm IO处理过程(http://blog.csdn.net/dashulu/article/details/16820281),本篇文章主要描述IO从gue ...

  2. GCD死锁,及同步、异步、串行和并行队列组合情形

      一.概述 1)队列用来存储代码任务,线程用来运行代码任务: 2)main()函数作为程序入口,整个程序默认运行在主线程中,程序代码任务默认存放在主队列中: 3)以下所谓阻塞线程是针对主线程而言(子 ...

  3. C++程序设计--实验二

    第二次实验主要内容是函数重载,快速排序及其模板实现,简单的user类实现. 实验结论: 一.函数重载编程练习 /*编写重载函数add(),实现对int型,double型和Complex型数据的加法.在 ...

  4. Linux学习笔记(第七章)

    目录相关操作 pwd -P 显示出实际工作目录,pwd 显示链接路径 mkdir -m 配置新建文件的权限 例:mkdir -m 711 testmkdir -p 建立多层目录,无需一层一层建立 rm ...

  5. WPF 自定义MenuItem样式

    原文:WPF 自定义MenuItem样式 一.前言 默认的MenuItem样式比较普通,这次自定义MenuItem的样式也只是对MenuItem的颜色风格进行变化.需要其他功能的变化,大家可以根据样式 ...

  6. sqlplus 中 各列对齐设定

    设置列标题的对齐方式 JUSTFIFY  {L[EFT]|C[ENTER]|R[IGHT]} SQL> col ename justify center SQL> /

  7. 21-[jQuery]-介绍,引入方式,与js的区别

    1.jQuery介绍 jQury官网:https://jquery.com/ 2.jQuery文件的引入 <!DOCTYPE html> <html lang="en&qu ...

  8. 【HNOI2013】数列

    题面 题解 设\(\{a_n\}\)为差分数组,可以得到柿子: \[ \begin{aligned} ans &= \sum_{a_1 = 1} ^ m \sum_{a_2 = 1} ^ m ...

  9. JavaScript——历史与简介

    上一篇博文距离现在已经四个月了,一直想写些什么无奈工作比较忙碌.我的恩师老王在毕业聚餐那天带着一声酒气告诉我一定要把博客坚持写下去,所以今天下决心要开始这个新的篇章. 之所以想要从头写一个关于Java ...

  10. 写高并发程序时慎用strncpy和sprintf

    分享一下最近做程序优化的一点小心得:在写高并发交易代码时要谨慎使用strncpy和sprintf. 下面详细介绍一下这样说的原因及建议实践: 1 慎用strncpy因为它的副作用极大 我们平时使用st ...