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

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:指定右下角的圆角半径
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值