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

    --1.创建临时空间 create temporary tablespace zyj_temp tempfile 'D:\app2\user\virtual\oradata\orcl\zyj_temp ...

  2. 学习笔记——OS——引论

    学习笔记--OS--引论 操作系统的定义 操作系统是一组管理计算机硬件资源的软件集合: 用户和计算机硬件之间的接口 控制和管理硬件资源 实现对计算机资源的抽象 计算机系统硬件 冯诺依曼体系结构和哈佛结 ...

  3. shell重温---基础篇(文件包含)

        和其他语言一样,Shell 也可以包含外部脚本.这样可以很方便的封装一些公用的代码作为一个独立的文件.Shell 文件包含的语法格式如下: . filename # 注意点号(.)和文件名中间 ...

  4. tkinter的GUI设计:界面与逻辑分离(二)-- 菜单栏

    由于要用到文件对话框和消息对话框,所以先给出下面的列表. py2 与 py3 中 tkinter 的变化: Tkinter → tkinter tkMessageBox → tkinter.messa ...

  5. 9 stark组件 增删改

    1.效果图 2.详细步骤解析 1.构造增删改查url,反向解析 2.ModelForm定制add.edit页面 3.staradmin中的ModelForm 3.总结.代码 1.知识点 1.解决代码重 ...

  6. centos 中sshd莫名其妙不见了?

    发现问题 遇到问题:首先莫要慌:事出有因:先检查一波: 首先呢,看一下/var/log/yum.log  是否有误删的记录: 如有被误删的操作的话:可以去看看日志:到底咋回事: 然后么 yum ins ...

  7. JNDI是什么,怎么理解

    JNDI 是什么 JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一,不少专家认为,没有透彻理解JNDI的 ...

  8. 手把手教你测微信小程序

    WeTest 导读 在小程序持续大量爆发的形势下,现在已经成为了各平台竞争的战略布局重点.至今年2月,月活超500万的微信小程序已经达到237个,其中个人开发占比高达2成.因小程序的开发门槛低.传播快 ...

  9. redis中key的归类

    redis中可以使用前缀对key进行归类: 例如:key: ITEM_INFO:123456:BASE ITEM_INFO:123456:DESC 作用:方便进行管理 如果把二维表保存到redis中: ...

  10. 使用Serilog输出到ES(使用笔记)

    第一步:安装Serilog 使用NuGet包安装以下组件: Serilog.AspNetCoreSerilog.Settings.ConfigurationSerilog.Sinks.ConsoleS ...