深入理解css3背景图边框

border-image知识点

深入理解css3背景图边框_第1张图片

重点理解 border-image-slice 设置的值将边框背景图分为9份,图像中间的舍弃,其他部分图像对应边框的相应区域放置,上右下左四角固定,border-image-repeat设置的是除四角外其他部分的显示方式。

深入理解css3背景图边框_第2张图片

截图来自菜鸟教程:CSS3 border-image-slice 属性 | 菜鸟教程 

目标:做如下边框效果图

深入理解css3背景图边框_第3张图片

边框背景原图

背景图像大小 81*81

依据 border-image-slice: 30; 将图像分为9部分,四角红色块放在边框对应的四角。

黄色块依据 border-image-repeat: round; 图像缩放平铺。

示例代码



  
    
    
    把边框玩出花
    
  
  
    

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate in voluptatum sunt quae, animi explicabo illo dolore doloribus ea fugit accusantium similique. Illo sint ipsam numquam ex doloribus in quam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, excepturi? Quae repellat aspernatur exercitationem quibusdam, minus veritatis accusamus! Molestiae ducimus voluptatum assumenda repellendus quasi dicta in culpa, quod iusto cupiditate.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus cupiditate, consectetur aliquid officia quidem eligendi repellendus, provident libero deleniti suscipit quod quam velit tenetur exercitationem reiciendis qui temporibus ad. Consequuntur?

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis nesciunt voluptates quibusdam laboriosam, quod consequatur recusandae eum nostrum corrupti sequi expedita saepe soluta sapiente velit est deserunt enim, cupiditate ex!

 

你可能感兴趣的:(每天进步一点点,css3,前端)