码迷,mamicode.com
首页 > Web开发 > 详细

CSS3-3

时间:2018-05-25 00:29:48      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:auto   repeat-y   方向   class   适应   nta   pad   uri   覆盖   

关于背景

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

 

CSS3-3

标签:auto   repeat-y   方向   class   适应   nta   pad   uri   覆盖   

原文地址:https://www.cnblogs.com/hangege/p/9085748.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!