HTML-CSS:边框图片

/*设置图片作为边框内容,默认情况下会吧图片放到边框的四个顶点,边框图片的优先级要高于边框颜色,如果设置了边框图片,那么就不会显示边框颜色*/
border-image-source:url("图片路径")

/*如何对指定边框图片进行切割*/
border-image-slice:70 70 70 70;
border-image-slice:70 70 70 70 fill;/*保留边框图像的中间部分*/

/*边框图片显示的宽度,不是边框的宽度*/
border-image-width:10px

/*除了边框图片的四个角以外的图片如何填充,默认是拉伸*/
border-image-repeat:stretch/repeat/round

/*边框图片向外移动多少
                                       上      右      下      左 */
border-image-outset:10px 30px 50px 70px;


连写属性

/*border-imge:资源路径 切割方式 填充模式;*/
border-imge:url("图片路径") 70 fill repeat;

案例:滑动门    边框按钮

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

相关阅读更多精彩内容

友情链接更多精彩内容