关于背景

一. 渐变&径向渐变(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. Excel 如何判断某列哪些单元格包含某些字符

    “条件格式”,公式: =IF(COUNTIF($A2,,,) 然后根据需要设置格式

  2. Spring发送邮件

    Spring邮件发送流程:第一步:邮件发送,需要一个邮件服务器.可以使用腾讯获得网易的邮件服务器.登录邮箱,点击左上角的设置,再点击账号 找到下列选项,点击开启,需要发短信验证,或者使用QQ安全登录扫 ...

  3. linux install Openvino

    recommend centos7 github Openvino tooltiks 1. download openvino addational installation for ncs2 ncs ...

  4. 详解Bootstrap实现基本布局的方法

    看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用bootstrap教程实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面我们先创建一个基本的 HTML 模板 ...

  5. Asp.net 按钮幕布遮盖效果实现方式

    Asp.net button按钮点击后想要实现幕布效果来等待服务器端执行完成,这种需求虽说看起来很简单,但真实做起来并不是那么简单,涉及了很多细节点,而对于深入理解asp.net button生命周期 ...

  6. [转载]linux下网卡漂移导致网络不可用

    转自:https://blog.csdn.net/hyatsz/article/details/47690993 linux下网卡漂移导致网络不可用 2015年08月16日 00:48:50 hyat ...

  7. Sonar 配置及部署（windows系统）

    Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具. 与持续集成工具(例如 Hudson/Jenkins 等)不同,Sona ...

  8. python生成可执行exe文件

    为什么要生成可执行文件 不需要安装对应的编程环境 可以将你的应用闭源 用户可以方便.快捷的直接使用 打包工具 pyinstaller 安装pyinstaller pip install pyinsta ...

  9. Vue-admin工作整理（八）： BUS | | 组件通信

    一.父子组件之间通信 思路:定义一个个人组件,个人组件通常需要在前缀统一命名一下,如:AInput,该组件的作用是将编辑框中的内容获取并通过事件提交出去,然后在目标组件(store)中通过双向交互模式 ...

  10. ZJOI-2017 R2 游记

    来说说考试(之前的事明天再补): 开始看了一遍所有题目,感觉第二题最可做的样子(ZJOI R1树状数组,HNOI splay 你们西方什么题我还没见过,淦!),大概感觉了一下所有题. T1:k=1直接 ...