使用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. abp vnext 开发快速入门 1 认识框架

    最近在做一个项目,用的框架是Abp vnext ,不是Abp, 我自己也是刚开始用这个框架来做项目,难免要查资料,这个框架官方有中文文档,可以到官网www.abp.io 去查看,国内也有一些写了相关的 ...

  2. Pollard-Rho

    \(code:\) ll pri[12]={2,3,5,7,11,13,17,19}; ll mul(ll x,ll y,ll mod) { ll c=(long double)x*y/mod+0.5 ...

  3. vue-methods三种调用的形势

    var btn = { template:`<button>组件add</button>` } var any = new Vue({ el: '#app', data:{ a ...

  4. From 表单序列化为json对象（代码片段）

    $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); $(array).each(f ...

  5. R语言 循环语句、分支语句和中止语句-控制流篇

    for 循环 用法 for (n in m) expr 若n在m中则运行 expr while 循环 用法 while (condition) expr 当符合condition时运行expr rep ...

  6. Day03_企业权限管理(SSM整合)

    学于黑马程序员和传智播客联合做的教学项目 感谢 黑马程序员官网 传智播客官网 个人根据教程的每天的工作进度的代码和资料 密码:cti5 b站在线视频 微信搜索"艺术行者",关注并回 ...

  7. Python爬虫开发与项目实战pdf电子书|网盘链接带提取码直接提取|

    Python爬虫开发与项目实战从基本的爬虫原理开始讲解,通过介绍Pthyon编程语言与HTML基础知识引领读者入门,之后根据当前风起云涌的云计算.大数据热潮,重点讲述了云计算的相关内容及其在爬虫中的应 ...

  8. Python实现数据结构 图

    邻接矩阵 class Vertex: def __init__(self, node): self.id = node # Mark all nodes unvisited self.visited ...

  9. PHP array_flip() 函数

    ------------恢复内容开始------------ 实例 反转数组中的键名和对应关联的键值: <?php$a1=array("a"=>"red&qu ...

  10. PHP dechex() 函数

    实例 把十进制转换为十六进制: <?phpecho dechex("30") . "<br>";echo dechex("10&qu ...