2020-10-20边框图片

边框图片

  • border-image-source:url() 指定图片作为边框图片

  • 注意:

    • 需要先设置border属性

    • 默认情况下,会将图片放到边框的四个顶点

    • 边框图片优先级高于边框颜色


  • border-image-slice:上 右 下 左 (fill); 切割图片(无单位),fill:填充中间内容

  • border-image-width: 边框图片显示的宽度

  • border-image-repeat: 除四个角外边框图片的填充方式

    • stretch:默认,拉伸图像来填充区域

    • round:无法完整平铺所有图像,则对图像进行缩放以适应区域

    • repeat:平铺图像来填充区域


  • border-image-outset: 上 右 下 左;边框图片向外移动距离

  • 缩写格式:border-image:资源地址 切割方式 (fill) 填充方式
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容