07前端css3边框和圆角

阴郁的天气背后是火辣的太阳

css内容很繁杂,一定要坚持持续性输出

 

CSS3 边框

css边框圆角

  • border-radius属性设置边框圆角,它是一个复合属性

    • border-top-left-radius

    • border-top-right-radius

    • border-bottom-right-radius

    • border-bottom-left-radis

  • value

    • 一个值:设置的是4个边框圆角

    • 两个值:设置对角线边框圆角(上左和下右、上右和下左)

    • 三个值:设置上左、(上右和下左) 、下右的圆角

    • 四个值:设置一个边框圆角的值

  • value值得单位可以为px、百分比、rem、em等

css边框阴影

  • box-shadow:属性设置盒子一个或多个下拉阴影

  • 语法:box-shadow: h-shadow v-shadow blur spread color inset;

    • h-shadow:水平方向的阴影

    • v-shadow:垂直方向的阴影

    • blur:模糊程度

    • spread:正值为阴影扩大的值,负值为阴影缩小的值

    • color:颜色

    • inset:如果设置了inset,阴影在边框外部改为阴影在边框内部

css边框图片

  • border-image:属性设置边框一个或多个的图片

  • 语法:border-image: source slice width outset repeat;

    • source:边框图片的路径,可以是多个值

    • slice:

      • 属性值:number|%|fill代表1-4个长度值(百分比)用于设置图片在每一条边(上右下左)上的内偏移

      • 作用:把盒子切成9宫格

      • 07前端css3边框和圆角
    • width:边框图片的宽度

      • 属性值:number|%|auto

        • number:代表border-width的倍数

        • % :参考边框图像区域的尺寸

        • auto:宽度为对应图像切片的固有宽度

      • 作用:代替border-width

    • outset:边框图像区域超出边框的宽度

      • 属性值:length|number

        • length:超出边框的宽度像素

        • number:对应border-width的倍数

      • 作用:让边框背景延伸到盒子外

    • repeat:边框图片排版方式

      • 属性值:repeat|round|stretch

        • repeat:平铺重复图像填充区域

        • round:图像铺满区域

        • stretch:拉伸图像填充区域

      • 作用:让边框背景延伸到盒子外

      •  

07前端css3边框和圆角

上一篇:08前端css3背景


下一篇:【ASP.NET】Html.Partial和Html. RenderPartial用法