当前位置:网站首页 > 创业 > 正文

css 用图片作为边框的事例分享

0 张子豪 张子豪 2025-10-12 09:43 1

      小编在进修 css 的过程中经常会用到  div 或者其他有边框的元素进行区域的划分,但教员讲解了 边框 不仅可以用线条着一种体例来闪现,还可可以用图像作为边框,这一结果感受挺适用的所以分享给大师;

东西/原料

  • 电脑
  • Sublime text 2

方式/步调

  1. 1

    起首我们找到先建立一个静态页面,在 body 里面直接写入一个 div(比力常见)很是简单的用div的边框来演示;

  2. 2

    我们先正常的为 div 设置一下 宽和高 还有边框属性,页面位置(这里 margin是为了让div 在网页居中,边框的厚度就宽一点。颜色选红色)

  3. 3

    然后我们实现如图一的结果,关头在于

    border-image属性,url 按照路径获取图像,12 是切取图像的边距(具体的百度诠释有点绕口)之后 round(程度铺满) stretch(垂直拉伸)

  4. 4

    第二个则是跟改变一下 程度 和  垂直的结果;

    即使  stretch(程度拉伸)   stretch(垂直拉伸)

    (还有一个属性  repeated  平铺;)

  5. 5

    第三个结果则是 节制 一下边距的细节达到的;

    border-imag:url() A B C D;对应的就是 上 右 下  左;

注重事项

  • 仅作分享;

来源:百闻(微信/QQ号:9397569),转载请保留出处和链接!


本文链接:https://www.ibaiwen.com/web/240535.html

张子豪

张子豪

TA很懒,啥都没写...

@百闻娱乐 本站部分内容转自互联网,若有侵权等问题请及时与本站联系,我们将在第一时间删除处理。 | 粤ICP备2024343649号 | (地图