CSS边框和背景

1.border-width
    取值是常规CSS长度,可以使用em,px,cm,百分数,thin,medium,thick
2.border-style
    none    没边框
    dashed    破折线边框
    double    双线式边框
    dotted    圆点线式边框
    groove    槽线式边框
    inset    使元素内容具有内嵌式效果的边框
    outset    使元素内容具有外凸式效果的边框
    ridge    脊线边框
    solid    实线边框
3.border-radius
    圆角边框
4.将图像用作边框    border-image
    border-image-source    设置图像URL
    border-image-slice    设置切分图像的偏移
    border-image-width    设置图像的宽度
    border-image-outset    指定边框图像向外扩展的部分
    border-image-repeat    设置图像填充边框区域的模式
    border-image
    p{
        border-image:url() 30 / 50px;    
    }
    控制切分图重复的方式    border-image-repeat样式  strtch(拉伸切分图充满整个空间,默认)  repeat(平铺切分图填满整个空间)
                round(在不截断切分图的情况下,平铺切分图填满整个空间)  space(在不截断切分图的情况下,平铺切分图并在图片之间保留一定的间距以填满整个空间)
5.背景
    background-repeat    设置重复方式 repeat,repeat-x, repeat-y(水平/垂直平铺,可能被截断),space,round,no-repeat
    background-size        设置尺寸    contain(等比例缩放,使其高或宽较大者与容器重合,背景始终在容器内) cover(等比例缩放,图像至少覆盖,有可能超出容器) auto(默认值,图像本身大小)
    background-position    设置背景图像位置  top,left,right,bottom,center
    background-attachment    设置元素中的图像是否固定或随页面一起滚动   fixed(背景固定到视窗上,内容滚动背景不dong) local(背景附着到内容上,背景随内容滚动) scroll(背景固定到元素上,不随内容滚动)
     background-clip        设置背景图像的裁剪方式 (同下)
    background-origin    设置背景图像绘制的起始位置 border-box(在边框盒子内部绘制背景颜色和图像) padding-box(在内边距盒子内部) centent-box (在内容盒子内部绘制)
    简写 background:<background-color><background-position><background-size><background-repeat><background-origin><background-clip><background-attachment><background-image>
6.创建盒子阴影
    box-shadow:hoffset voffset blur spread color inset
    hoffset        阴影的水平偏移
    voffset     阴影的垂直偏移
    blur         指定模糊值
    spread         指定阴影的延伸半径
    color         设置阴影的颜色
    inset         将阴影设置为内部阴影
    box-shadow:5px 4px 10px 2px gray inset;
7.创建轮廓
    outline-color    设置外围轮廓颜色
    outline-style    设置轮廓距离元素边框边缘的偏移量
    outline-windth    设置轮廓样式
    outline        简写<颜色><样式><宽度> outline:thick solid red




猜你喜欢

转载自blog.csdn.net/Lxiaohuli/article/details/64100892
今日推荐