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

 时间:2026-02-13 13:35:53

1、首先我们找到先创建一个静态页面,在 body 里面直接写入一个 div(比较常见)非常简单的用div的边框来演示;

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

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

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

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

3、然后我们实现如图一的效果,关键在于

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

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

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

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

4、第二个则是跟改变一下 水平 和  垂直的效果;

即使  stretch(水平拉伸)   stretch(垂直拉伸)

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

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

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

5、第三个效果则是 控制 一下边距的细节达到的;

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

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

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

  • 如何使用js的filter()过滤数组
  • css制作圆;css如何画圆;css如何制作圆形
  • 如何用jquery取得table的总行数
  • 怎样用flash cs3制作下雨效果
  • 求x=(lnt)^3,y=sint(lnt-t)参数函数的二阶导数
  • 热门搜索
    迎燕空调怎么样 还看今朝的还怎么读 油脂性脱发怎么办 古代人怎么剪指甲 扬子地板怎么样 商丘旅游景点 孕妇可以喝苦荞茶 炖鸡汤怎么做好吃 杏仁吃多了会怎么样 四川九寨沟旅游