关于背景

一. 渐变&径向渐变(background-image: -webkit-linear-gradient() && background-image: -webkit-radial-gradient())

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .box {

              margin: 200px 0 0 200px;

              width: 200px;

              height: 200px;

              background-color: orange;  

              /* 不用浏览器前缀

                          chrome : -webkit-

                          Firefox :  -moz-;

                          IE  :  -ms-;

                          opera : -o-;

                      */

              /* 1 基本用法*/ /*旋转角度，竖直开始；加前缀，水平开始*/

            /*background-image: -webkit-linear-gradient(rgba(255,0,0,.2), yellow, blue 30%, green 100%);

            background-image: -o-linear-gradient(rgba(255,0,0,.2), yellow, blue, green);

            background-image: linear-gradient(rgba(255,0,0,.2), yellow , blue 30%, green 30%);*/

              /*控制颜色渐变的方向  

                  to right -- 从左向右

                  to top -- 从下到上

                  to left -- 从右到左

                  to bottom --- 从上到下（默认值）  

              */          

              /*0deg = to top -- 从下到上*/

              /*基于0度顺时针旋转45deg*/

              /*基于0度逆时针旋转45deg*/   

              /*设置过渡颜色的起始位置*/

              /*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/ 

              /* 2 径向渐变 : 由圆点向外延伸*/

              background-image: -webkit-radial-gradient(100px 100px,blue,white,red,black,purple,navy,green,yellow);

          }

    </style>

</head>

<body>  

<div class="box"></div>  

<script type="text/javascript">

</script>

</body>

</html>

二. 渐变&径向渐变()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

            width: 508px;

            height: 300px;

            border: 10px solid #000;

            padding: 100px;

            background: url("C:\\Users\\Public\\Pictures\\Sample Pictures\\jjy.jpg") ;

            /* 默认：background-clip: padding-box; */

            /*

                background-clip: content-box;

                border-box    背景被裁剪到边框盒。    测试

                padding-box    背景被裁剪到内边距框。    测试

                content-box    背景被裁剪到内容框。

            */

            background-clip: content-box;

            /*    background-origin: padding-box|border-box|content-box;

                padding-box    背景图像相对于内边距框来定位。（默认）

                border-box    背景图像相对于边框盒来定位。

                content-box    背景图像相对于内容框来定位。

            */

            background-origin: content-box;

            /*

                background-size: length|percentage|cover|contain;

                length        设置背景图像的高度和宽度。

                            第一个值设置宽度，第二个值设置高度。

                            如果只设置一个值，则第二个值会被设置为 "auto"。

                percentage    以父元素的百分比来设置背景图像的宽度和高度。

                            第一个值设置宽度，第二个值设置高度。

                            如果只设置一个值，则第二个值会被设置为 "auto"。

                cover        把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

                            背景图像的某些部分也许无法显示在背景定位区域中。(原图)

                contain        把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域(保证不变形)

            */

            /*background-size: 100px;*/

            /*background-size: 600px auto; */

            /*background-size: 100%;*/

            background-size: cover;

            /*background-size: contain;*//*这个等价于background-size: 100%;*/

            /*

                多背景：一个盒子可以携带多个背景。

            */

            /*

                background: url() repeat-y,

                            url() no-repeat,

                            url();

                background-size: auto auto,

                                 600px 600px,

                                 auto auto;

            */

        }

    </style>

</head>

<body>

    <div>文字</div>

</body>

</html>

 三.过渡

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*

            1.过渡：表示元素从状态1 到 状态2 变化不是瞬间的，而是动画。可以用css3 的 transition属性制作。css3前，是通过js的定时器(setInterval)实现。transition是浏览器内核c++实现的，因此效率极高。不过可能存在兼容问题。

            2.基本语法

            transition    简写属性，用于在一个属性中设置四个过渡属性。

        transition-property    规定应用过渡的 CSS 属性的名称。

        transition-duration    定义过渡效果花费的时间.

    transition-timing-function    规定过渡效果的时间曲线。

    transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

            transition-delay    规定过渡效果何时开始.

            transition: "过渡的属性名称 all表示所有" "过渡所需时间" "过渡时间曲线" "过渡开始时间";

        */

        div{

            width: 500px;

            height: 500px;

            background: yellowgreen;

            transition: all 2s linear;

        }

        div:hover{

            background: red;

        }

        /*

            3.哪些属性不能用过渡？渐变色、float；几乎都可以用过渡属性。

            对比：JQ的animate函数对 background-color，background-position不支持，css3支持。

        */

        /*

            4.什么是否出发过渡？

                任何的css变化都会触发过渡。

        */

    </style>

</head>

<body>

    <div></div>

</body>

</html>

CSS3-3的更多相关文章

  1. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  2. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  3. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  4. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  5. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  6. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. 前端制作动画的几种方式（css3，js）

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  9. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  10. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

随机推荐

  1. SSM-网站前台博客系统制作（1）---前台+Google的Kaptcha

    前提: 1天半时间简单自己手写了一下前端布局和后台验证码的基本工作,简要说明一下遇到的问题和收获吧. 这次基本就是前台设计(首页)+Kaptcha图片验证码(之前弄了一个reCaptcha验证码 但是 ...

  2. JS(JavaScript）的进一步了解1（更新中···）

    1.作用域链 作用域:浏览器给JS的一个生存环境(栈内存). 作用域链:JS中的关键字var 和function 都可以提前声明和定义.提前声明和定义的内容放在我们的 内存地址(堆内存)中.然后JS从 ...

  3. Visual Studio 2017 和 Visual Assist X 番茄助手的安装教程

    声明:本文所提供的所有软件均来自于互联网,仅供个人研究和学习使用,请勿用于商业用途,下载后请于24小时内删除,请支持正版! 一.Visual Studio 2017的安装教程 Visual Studi ...

  4. Spark机器学习基础一

    特征工程 对连续值处理 0.binarizer/二值化 from __future__ import print_function from pyspark.sql import SparkSessi ...

  5. SonarQube 中文教程 （1）- 简介

    SonarQube是什么 SonarQube 是一个用于代码质量管理的开源平台,用于管理源代码的质量. 通过插件形式,可以支持包括 java, C#, C/C++, PL/SQL, Cobol, Ja ...

  6. 支持向量机（Support Vector Machine）：超平面

    超平面 超平面是 $n$ 维空间的 $n-1$ 维子空间,类似二维空间的直线,三维空间的平面. 分类学习最基本的想法就是基于训练集D在样本空间中找到一个划分超平面,将不同类别的样本分开.以二维空间为例 ...

  7. Operation not permitted

    centos7 下,修改文件夹的权限时,报了这么一个错误.linux 下,此法依然奏效. 错误日志: chmod: changing permissions of '/opt/apps/images/ ...

  8. css3 calc()的用法

    转载自:css3 calc()的用法 说明:calc(四则运算):任何长度值都可以使用calc()函数进行计算:和平时的加减乘除优先顺序一样一样的: 特别注意:calc()里面的运算符必须前后都留一个 ...

  9. Python 开发 项目《外星人入侵》

    2019-02-05 本篇心路历程: 本篇是打算记录自己的第一个python项目,也是众人皆知的<外星人入侵项目>,本项目大概500多行.趁着寒假,大概耗时3天吧,把完整代码敲了出来,当然 ...

  10. ACM-ICPC2018南京赛区 Mediocre String Problem

    Mediocre String Problem 题解: 很容易想到将第一个串反过来,然后对于s串的每个位置可以求出t的前缀和它匹配了多少个(EXKMP 或者 二分+hash). 然后剩下的就是要处理以 ...