首页 > > 网页制作 > css >

CSS3-3

2018-06-24 02:25:22来源：未知阅读 ()

关于背景

一. 渐变&径向渐变(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>