疯狂H5笔记 - 背景和边框相关属性

来源：互联网发布：支付宝php服务端开发编辑：程序博客网时间：2024/06/02 03:28

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：指定背景覆盖contentbackground-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:指定右下角的圆角半径

0 0