使用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. Makefile中自动生成头文件依赖

    为什么需要自动生成头文件依赖? 编译单个源文件时,需要获取文件中包含的头文件的信息,但是一般的Makefile不会在规则中明确写明文件依赖的头文件,所以单独修改头文件后,不会导致包含头文件的源文件重新 ...

  2. WebApi部署多服务器配置Nginx负载均衡

    01PARTCoreWebApi教程本地演示环境 Visual Studio2019 --- Vsersion:16.4.4 + NetCore3.1.2 02PARTNginx快速搭建配置负载均衡 ...

  3. flask下直接展示mysql数据库 字段

    在工作中,会导出一份mysql的html来查看,用的是就是路过秋天大神的那个工具,所以想自己用那个样式直接在后端写一个页面做展示! 前端页面 from flask import Flask,reque ...

  4. vue学习(十九) 生命周期 了解

    生命周期:从vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期 生命周期钩子:就是生命周期事件的别名而已 生命周期钩子==生命周期函数==生命周期事件 生命周期函数分类 ...

  5. spring学习（三）属性注入

    用的是IDEA的maven工程,pom.xml文件导包依赖省略 本文主要写set方式注入 (一).一般类型注入 一.写两个实体类Car.User public class Car { private ...

  6. 学python不是一个入门教程就行，学之前你必须知道这些

    第一 学习方向:python应用方向很多,必须明确学习方向想 全栈开发:就是web应用开发,是用来写网站后台的数据分析:就是做大数据分析的,数据量级起码是千万级别的,做的是大数据分析网络爬虫:其实属于 ...

  7. intellij IDEA导入maven项目

    一.导入maven项目 1.打开intellij idea,点击File(如下图1),然后点击Open(如下图2)

  8. ~~网络编程（三）：TCP/UDP~~

    进击のpython ***** 网络编程--TCP/UDP协议 其实你也发现了,应用层是交给应用来处理的,我们什么也做不了 相较于网络编程来说,我们更重要的是在做应用层和传输层的对接 因为你也看到了, ...

  9. GhostNet: More Features from Cheap Operations

    论文:GhostNet: More Features from Cheap Operations,CVPR 2020 代码:https://github.com/iamhankai/ghostnet. ...

  10. 跟老刘学运维day01~谈红帽系统

    第0章 谈红帽系统 1.Linux,是一套免费使用和自由传播的类Unix操作系统,其源代码完全开源: 开源:==>将程序与程序的源代码一起提供给用户的服务模式. 开源四大特点:低风险.高品质.低 ...