首先界面是二维的但也可以有三维的效果。先了解浏览器兼容性问题,火狐加前缀(-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. PHP原生开发的各大音乐平台API接口

    支持以下音乐平台 网易云音乐 QQ音乐 酷狗音乐 酷我音乐 虾米音乐 百度音乐 一听音乐 咪咕音乐 荔枝FM 蜻蜓FM 喜马拉雅FM 全民K歌 5sing原创 5sing翻唱 若是数据获取失败 方案一 ...

  2. PHPCMS v9 手机版如何设置独立域名

    一.在PHPcms V9管理后台设置手机门户(目前phpcms v9 版本为V9.6.3) 1.1.开启手机网站.位置:模块 >手机门户 > 添加手机站点,具体设置可参照截图: 填写站点名 ...

  3. Go指南 - 笔记

    Go指南 - 笔记 标签(空格分隔): Go Go指南 一.基础 1.包 每个Go程序都是由包构成的. 程序从main包开始运行. 包名与导入路径的最后一个元素一致 2.导入 分组导入:使用圆括号组合 ...

  4. plsql分页

    分页是任何一个网站(bbs,网上商城,blog)都会使用到的技术,因此学习pl/sql编程开发就一定要掌握该技术.如下图: 1.  编写无返回值的存储过程 首先是掌握最简单的存储过程,无返回值的存储过 ...

  5. Hadoop namenode启动瓶颈分析

    NameNode启动过程详细剖析 NameNode中几个关键的数据结构 FSImage Namenode会将HDFS的文件和目录元数据存储在一个叫fsimage的二进制文件中,每次保存fsimage之 ...

  6. AtCoder ExaWizards 2019 D Modulo Operations

    题意 给出一个长度为\(n\)的数列和数字\(X\),对于数列的每一种排列,其权值\(X\)依次对排列中的数取模,求出\(n!\)种情况最后剩下的数的权值和 分析 如果大的数字排在小的数字后面,那么大 ...

  7. [NOI2016]区间 线段树

    [NOI2016]区间 LG传送门 考虑到这题的代价是最长边减最短边,可以先把边按长度排个序,双指针维护一个尺取的过程,如果存在包含某个点的区间数\(\ge m\),就更新答案并把左指针右移,这样做的 ...

  8. Python Machine Learning: Scikit-Learn Tutorial

    这是一篇翻译的博客,原文链接在这里.这是我看的为数不多的介绍scikit-learn简介而全面的文章,特别适合入门.我这里把这篇文章翻译一下,英语好的同学可以直接看原文. 大部分喜欢用Python来学 ...

  9. IDEA中java文件的左下角有个像乐符一样的J符号

  10. asp.net core 自定义中间件和service

    首先新建项目看下main方法: public static void Main(string[] args) { var host = new WebHostBuilder() .UseKestrel ...