使用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. 更改docker默认存储路径操作（centos6版本）

    一. centos6版本  service启动方式 1.更改启动文件 vim /etc/sysconfig/docker   添加更改的路径 '--graph="/data/docker&q ...

  2. Typora + PicGo + Gitee 实现图片自动上传到图床

    1.下载并安装 Typora (windows版本) https://typora.io/#windows 2.设置图像 文件 -- 偏好设置 -- 图像 3.上步点击下载PicGo(app) 后,去 ...

  3. presto和hive日期函数对比

    时间格式转换 日期格式→Unix时间戳 转10位Unix时间戳 数据:2020-07-23 15:01:13 Presto:select to_unixtime(cast('2020-07-23 15 ...

  4. matplotlib基础汇总_03

    四图 直方图 [直方图的参数只有一个x!!!不像条形图需要传入x,y] hist()的参数 bins 可以是一个bin数量的整数值,也可以是表示bin的一个序列.默认值为10 normed 如果值为T ...

  5. 线程_ThreadLocal

    import threading # 创建ThreadLocal对象 house = threading.local() def process_paper(): user = house.user ...

  6. HTML 统一资源定位器(Uniform Resource Locators)

    HTML 统一资源定位器(Uniform Resource Locators) URL 是一个网页地址.高佣联盟 www.cgewang.com URL可以由字母组成,如"runoob.co ...

  7. PHP floor() 函数

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

  8. PHP strnatcasecmp() 函数

    实例 使用"自然"算法来比较两个字符串(不区分大小写): <?php高佣联盟 www.cgewang.comecho strnatcasecmp("2Hello w ...

  9. C#与网络相关的两个监听的事件

    今天遇到一个问题,当网络连接有问题的时候设计软件向用户发送通知,查了资料发现了两个相关的事件分享一下. 一.System.Net.NetworkInformation命名空间下的NetworkChan ...

  10. Linux的VMWare14中配置Centos7桥接网络环境(网络一)

    1.查看当前初始环境如下:在windows端先查看本机ip   ifconfig