使用css的特有属性，给不同的盒子添加边框图片。

为什么会有这一场景呢。因为，UI给我们前端的边框图片可能未必适合我们当前的内容。

这里我们主要使用到的属性有：

  • border-image-source
  • border-image-slice
  • border-top-width
  • border-image-repeat

个别属性可以根据自己的个人情况决定是否添加，希望使用的时候自己甄别。

切边框图片的顺序:

下面是我的代码案例

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    html,

    body {

      width: 100%;

      height: 100%;

    }

    ul li {

      list-style: none;

    }

    .box1 {

      width: 300px;

      height: 300px;

      margin: 100px;

      border: 5px solid #000;

      border-image-source: url(./1.png);

      /* 背景图片路径 */

      border-image-slice: 10 20 20 20;

      /* 如何切割图片 */

      border-top-width: 5px;

      /* 图片的宽度是多少 */

      /* border-image-repeat: stretch; 默认是stretch */

      /* border-image-repeat: round; */

      /* round 是环绕 */

    }

    .box2 {

      width: 300px;

      height: 300px;

      margin: 150px;

      border: 5px solid #000;

      border-image: url(./2.png) 40 / 10px;

      /* 顺序为上左下右，如果4个值一样，那么就可以省略写成一个值 ，注意，这里不要加px

      border-image 后面的/ 的意思是我切完图，将图放在多少个像素中的边框中去，

      如果不写，就默认按照上面border中的像素去填充 */

      /* 如果默认不写就是拉伸 stretch */

    }

    .box3 {

      width: 300px;

      height: 300px;

      margin: 250px;

      /* background-color: hotpink; */

      border: 5px solid #000;

      border-image: url(./3.png) 40 / 10px repeat;

    }

  </style>

</head>

<body>

  <!-- 大盒子 -->

  <div class="box1">

    我是盒子一

  </div>

  <div class="box2">

    我是盒子二

  </div>

  <div class="box3">

    我是盒子三（边框颜色有点浅哦）

  </div>

</body>

</html>

三张边框图片素材，我也上传上来了。仅供参考。

代码效果图如下：

使用css设置边框背景图片的更多相关文章

  1. css 设置body背景图片铺满

    background-image: url(../../../assets/images/workflow/work.png); background-repeat: no-repeat; backg ...

  2. 使用CSS设置边框和背景

    一.设置边框 1.边框样式 属性 说明 border-width 设置边框的宽度 boder-style 设置边框的样式 border-color 设置边框的颜色 a.border-width属性 自 ...

  3. css如何使背景图片水平居中

    CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...

  4. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  5. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  6. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  7. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  8. CSS设置标签、图片放大、缩小、旋转、移动(tranform)

    CSS设置标签.图片放大.缩小.旋转.移动(tranform) 1.缩小和放大属性(scale) 格式:tranform:缩小类型(数值): 注意:缩小和放大都是 scale : 其中的值(0~1)代 ...

  9. CSS设置边框、符号、背景样式、链接属性

    一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...

随机推荐

  1. 设计模式：observer模式

    目标:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新 例子: class Observer //观察者 { public: virtual vo ...

  2. 题解 洛谷 P5331 【[SNOI2019]通信】

    考虑用费用流解决本题. 每个哨站看作一个点,并将其拆为两个点,建图方式为: \(S \longrightarrow x_i\) 容量为\(1\),费用为\(0\) \(x_i \longrightar ...

  3. python线程,进程,队列和缓存

    一.线程 threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. 创建线程的两种方式1.threading.Thread import threading def f1(arg): ...

  4. C#怎么统计网站当前在线人数

    1.问题背景 c#网站怎么合理的统计在线人数?我想通过全局变量来统计软件的使用情况,当启动软件时向服务器的用户表写开始使用时间,正常退出时写一个结束使用时间,来统计用户的在线使用情况. 但是有一个问题 ...

  5. 一次django内存异常排查

    起因 Django 作为 Python著名的Web框架,相信很多人都在用,自己工作中也有项目项目在用,而在最近几天的使用中发现,部署Django程序的服务器出现了内存问题,现象就是运行一段时间之后,内 ...

  6. 记一次使用commit提交大文件无法推送到远程库解决问题过程及git rebase使用

    记一次使用commit提交大文件无法推送到远程库解决问题过程及git rebase使用 目录 大文件无法push到远程仓库 问题 commit的大文件无法push到远程库解决办法 git filter ...

  7. PHP array_fill() 函数

    ------------恢复内容开始------------ 实例 用给定的键值填充数组: <?php$a1=array_fill(3,4,"blue");print_r($ ...

  8. Python List cmp()方法

    描述 cmp() 方法用于比较两个列表的元素.高佣联盟 www.cgewang.com 语法 cmp()方法语法: cmp(list1, list2) 参数 list1 -- 比较的列表. list2 ...

  9. PHP is_scalar() 函数

    is_scalar() 函数用于检测变量是否是一个标量.高佣联盟 www.cgewang.com 标量变量是指那些包含了 integer.float.string 或 boolean 的变量,而 ar ...

  10. PHP floor() 函数

    实例 向下舍入为最接近的整数: <?phpecho(floor(0.60) . "<br>");echo(floor(0.40) . "<br&g ...