首页 > 代码库 > css实例--边框

css实例--边框

border-image:

  • border-image-source
  • border-image-slice:裁剪,可以是像素值或百分比;
  • border-image-width
  • border-image-outset:边框偏离基准值的大小,默认0;
  • border-image-repeat:stretch拉伸/repeat重复/round平铺;
    • demo  //注意中间带有参数顺序的3个参数之间需要使用斜杠
    • 这个值要考虑不同浏览器的兼容性;
    • 在firefox下看不到边框的话,先检查border-style:solid;

border-radius:

  • border-top/button-left/right-radius
  • border-radius:100px 25px 50px 50px / 50px 25px 50px 25px; 

技术分享

border-shadow:h-shadow v-shadow [blur/*阴影模糊距离*/  spread/*阴影尺寸*/   color inset];

  • 例子:
    • box-shadow:5px 8px 5px 3px red;

技术分享

    •   box-shadow:5px 8px 5px 3px red inset;

技术分享

 

css实例--边框