使用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. Python的telnetlib模块使用

    telnetlib模块的常用接口 telnetlib.Telnet(host, port, timeout) # 登录 write() # 输入命令 read_until(match) # 读出响应, ...

  2. Selenium自动化：有代码测试与无代码测试。这些你都懂了吗？

    大多数测试人员认为 Selenium是满足其测试自动化需求的自动化框架.作为全球测试人员使用的开放源框架, Selenium 无疑是测试人员适应日趋敏捷的公司的一种好方法.实际上, Selenium仍 ...

  3. nginx访问日志分析，筛选时间大于1秒的请求

    处理nginx访问日志,筛选时间大于1秒的请求   #!/usr/bin/env python ''' 处理访问日志,筛选时间大于1秒的请求 ''' with open('test.log','a+' ...

  4. AI大厂算法测试心得：人脸识别关键指标有哪些？

    仅仅在几年前,程序员要开发一款人脸识别应用,就必须精通算法的编写.但现在,随着成熟算法的对外开放,越来越多开发者只需专注于开发垂直行业的产品即可. 由调查机构发布的<中国AI产业地图研究> ...

  5. Python访问元组

    Python访问元组: 使用索引下标进行访问元组: # 通过索引下标进行访问 tuple_1 = ('a','b','c','d','e','f','g') # 输出元组中的第一个值 print(tu ...

  6. PHP natsort() 函数

    ------------恢复内容开始------------ 实例 对数组进行排序: <?php$temp_files = array("temp15.txt"," ...

  7. PHP fwrite() 函数

    定义和用法 fwrite() 函数将内容写入一个打开的文件中. 函数会在到达指定长度或读到文件末尾(EOF)时(以先到者为准),停止运行. 如果函数成功执行,则返回写入的字节数.如果失败,则返回 FA ...

  8. PDO::exec

    PDO::exec — 执行一条 SQL 语句,并返回受影响的行数(PHP 5 >= 5.1.0, PECL pdo >= 0.1.0) 说明 语法 int PDO::exec ( str ...

  9. odoo自定义模块项目结构，odoo自定义模块点安装不成功解决办法

    如图所示:在odoo源码的根目录中创建自己的项目文件(project) 在odoo.conf配置文件中的addons_path路径中加入自己项目的文件夹路径,推荐使用绝对路径 addons_path ...

  10. ABAP 动态备份自建表数据到新表（自建表有数据的情况下要改字段长度或者其他）

    当abaper开发好一个程序给用户使用一段时间后,发现某个字段的长度需要修改,但数据库表中已经存在很多数据,冒然直接改表字段可能会导致数据丢失,这种问题的后果可能非常严重. 所以我想到先复制出一个新表 ...