CSS常用属性3

一、背景

　　1、背景原点（background-origin）：

　　　　说明：设置元素背景图片的原始起始位置。必须保证背景是background-repeat为no-repeat此属性才会生效。

　　　　取值：background-origin: border-box | padding-origin | content-box

　　　　　　1）border-box：从border区域（含border）开始显示背景图像。

　　　　　　2）padding-box：从padding区域（含padding）开始显示背景图像。

　　　　　　3）content-box：从content区域开始显示背景图像。

如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                margin-top: 10px;
                padding: 20px;
                background: #ccc url(4.png) no-repeat;
                border: 10px dashed #000;
            }
            .border-box{
                background-origin: border-box;
                -webkit-background-origin: border-box;/*兼容性*/
            }
            .border-padding{
                background-origin: padding-box;
                -webkit-background-origin: padding-box;/*兼容性*/
            }
            .border-content{
                background-origin: content-box;
                -webkit-background-origin: content-box;/*兼容性*/
            }
        </style>
    </head>
    <body>
        <div class="border-box"></div>
        <div class="border-padding"></div>
        <div class="border-content"></div>
    </body>
</html>

　　2、背景的显示区域（background-clip）:

　　　　说明：设定背景图像向外裁剪的区域。

　　　　取值： background-clip: border-box | padding-box | content-box | text

　　　　　　border-box：从border区域（不含border）开始向外裁剪背景。

　　　　　　padding-box：从padding区域（不含padding）开始向外裁剪背景。

　　　　　　content-box：从content区域开始向外裁剪背景。

　　　　　　text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                margin-left: 10px;
                padding: 20px;
                background: #ccc url(4.png) no-repeat;
                border: 10px dashed #000;
            }
            .border-box{
                background-clip: border-box;
            }
            .padding-box{
                background-clip: padding-box;
            }
            .content-box{
                background-clip: content-box;
            }
            .text{
                width: auto;
                height: auto;
                background-repeat: repeat;
                -webkit-text-fill-color: transparent;/*会覆盖color所定义的字体颜色，要加前缀webkit*/
                background-clip: -webkit-text;/*用背景填充文字*/
                font-weight: bold;
                font-size: 60px;
            }
        </style>
    </head>
    <body>
        <div class="border-box"></div>
        <div class="padding-box"></div>
        <div class="content-box"></div>
        <div class="text">从前景内容的形状作为裁剪区域向外裁剪背景</div>
    </body>
</html>

　　3、背景尺寸（background-size）

　　　　说明：设置背景图像的大小。

  • 该属性提供2个参数值(特性值cover和contain除外)。
  • 如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
  • 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。

　　　　取值：background-size: auto | <length> | <percentage> | cover | contain

　　　　　　1)auto：默认值，背景图像的真实大小。
　　　　　　2)<length>(长度值)：用长度值指定背景图像大小。不允许负值。
　　　　　　3)<percentage>(百分比)：用百分比指定背景图像大小。不允许负值。
　　　　　　4)cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
　　　　　　5)contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

 如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width:300px;
                height: 300px;
                margin-left: 10px;
                border: 1px solid black;
                background:url(0.png) no-repeat;
                color: red;
                float: left;/*定义元素向左浮动，即div向左排列*/
            }
            .cover{
                background-size: cover;
            }
            .contain{
                background-size: contain;
            }
        </style>
    </head>
    <body>
        <div>原比例</div>
        <div class="cover">cover将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容</div>
        <div class="contain">contain将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内</div>
    </body>
</html>

　　4、背景图像的滚动（background-attachment）：

　　　　说明：设置背景图像是否固定或者随着页面的其余部分滚动。前题有设置background-image。

　　　　取值：background-attachment: scroll | fixed | local

　　　　　　1)scroll：背景图片随页面的其余部分滚动。这是默认。

　　　　　　2)fixed：背景图像相对于窗体固定。

　　　　　　3)local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。

代码如下：

body
{ 
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

　　

　　5、背景样式缩写：

　　　　背景样式多个属性的缩写：background: color image repeat attachment position/size origin clip

  • 一个元素可以设置多重背景图像。
  • 每组属性间使用逗号分隔。
  • 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
  • 如果有size值，需要紧跟position并且用“/”隔开。

如下：

缩写

body{background: #aaa url(img) no-repeat scroll 10px 20px/110px 130px content-box padding-box ;}

拆分：

body{
background-color:#aaa;
background-image:url(test3.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:,10px 20px;
background-size:110px 130px;
background-origin:content-box;
background-clip:padding-box;
}

　　5.1、多重背景：

缩写：

body{
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
       url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;
}

拆分：

body{
background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat,no-repeat,no-repeat;
background-attachment:scroll,scroll,scroll;
background-position:10px 20px,10px 20px,10px 20px;
background-size:50px 60px,70px 90px,110px 130px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-color:#aaa;
}

二、样式列表（list-style）

　　1、项目符号（list-style-type）：控制列表每一项的头部图标。

　　　　取值：list-style-type：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | 　　　　　　　hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

　　　　disc：实心圆(CSS1)
　　　　circle：空心圆(CSS1)
　　　　square：实心方块(CSS1)
　　　　decimal：阿拉伯数字(CSS1)
　　　　lower-roman：小写罗马数字(CSS1)
　　　　upper-roman：大写罗马数字(CSS1)
　　　　lower-alpha：小写英文字母(CSS1)
　　　　upper-alpha：大写英文字母(CSS1)
　　　　none：不使用项目符号(CSS1)
　　　　armenian：传统的亚美尼亚数字(CSS2)
　　　　cjk-ideographic：浅白的表意数字(CSS2)
　　　　georgian：传统的乔治数字(CSS2)
　　　　lower-greek：基本的希腊小写字母(CSS2)
　　　　hebrew：传统的希伯莱数字(CSS2)
　　　　hiragana：日文平假名字符(CSS2)
　　　　hiragana-iroha：日文平假名序号(CSS2)
　　　　katakana：日文片假名字符(CSS2)
　　　　katakana-iroha：日文片假名序号(CSS2)
　　　　lower-latin：小写拉丁字母(CSS2)
　　　　upper-latin：大写拉丁字母(CSS2)

如下

  • 实心圆
  • 空心圆
  • 实心方块
  • 不现实项目符号
  • 阿拉伯数字
.ul1{list-style-type:disc;}
.ul2{list-style-type:circle;}
.ul3{list-style-type:square;}
.ul4{list-style-type:none;}
.ul5{list-style-type:decimal;}

　　2、自定义项目符号（list-style-image）：用图片来定义列表的每一项的头部图标。

　　　　取值：list-style-image: none | url(ulr)

　　3、项目标记位置（list-style-position）：规定列表中列表项目标记的位置

　　　　取值：list-style-position: outside | inside

　　　　1)outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐

　　　　2)inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐

三、变形样式（transform）

　　改变元素的大小，透明，旋转角度，扭曲度等。

　　取值：transform: none | <transform-function>+

　　　　transform-function包含以下几个方法：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lzh739887959/p/5767876.html