疯狂H5笔记 - 背景和边框相关属性_h5 background-repeat-CSDN博客

本文链接：https://blog.csdn.net/qq_27905183/article/details/53085323

1.背景相关属性：

background-attachment：设置背景图片是随着对象内容滚动还是固定，有两个属性值:
    scroll：随组件内容的滚动而滚动
    fixed：背景图片固定
background-color：设置背景颜色，如果同时设置了背景颜色和背景图片，背景图片将会覆盖背景颜色
background-image：设置背景图片，属性值形如:url(url) 
background-position：设置背景图片的位置，一个值表示横坐标，纵坐标默认50%；两个值分别表示横纵坐标
background-repeat：设置背景图片的铺展方式：属性值有：repeat、no-repeat、repeat-x、repeat-y；分别对应：横向纵向同时平铺、不平铺、横向平铺、纵向平铺
background-clip：设置背景覆盖的范围。属性值有：
    border-box：指定背景覆盖border、padding、content
    no-clip：指定背景覆盖border、padding、content
    padding-box：指定背景覆盖padding、content
    content-box：指定背景覆盖content
background-origin：设置背景图片覆盖的起点。属性值有：
    border-box：指定背景图片从border开始覆盖
    padding-box：指定背景图片从padding开始覆盖
    content-box：指定背景图片从content开始覆盖
background-size：设置背景图片的大小，属性有两个值组成，分别代表图片的宽度和高度，形如:background-size: 100% 50%;

2.CSS支持多背景图片，依然是通过background-image/background-repeat/background-position/background-size等属性来控制的，只是允许指定多个属性值，使用逗号来隔开如下:

<!Doctype html>
<html>
    <head>
        <title>多个背景图片</title>
        <script>
            #div1{
                background-image: url(1.jpg), url(2.jpg), url(3.jpg);
                background-repeat: repeat-x, repeat-y, no-repeat;
                background-position: center top, left center, left,right;
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>

3.border是一个复合属性，用于同时设置边框的粗细、线条和颜色。分别对应于:border-width/border-style/border-color。其中线条属性值支持如下：

none：无边框
hidden：隐藏边框
dotted：点线边框
dashed：虚线边框
solid：实线边框
double：双线边框
groove：3D凹槽边框
rigde：3D凸槽边框
inset：3D凹入边框
outset：3D凸入边框

4.CSS3提供了四个属性来支持渐变边框：

border-top-colors：设置目标组件的上边框的渐变颜色。如果设置上边框的宽度为npx，那么就可以为该属性设置n个颜色值
border-right-colors:...
border-bottom-colors:...
border-left-colors:...

5.CSS3提供了四个属性来支持圆角边框：

border-top-left-radius:指定左上角的圆角半径
border-top-right-radius:指定右上角的圆角半径
border-bottom-left-radius:指定左下角的圆角半径
border-bottom-right-radius:指定右下角的圆角半径