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

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

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

border-image-source

border-image-slice

border-top-width

border-image-repeat

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

切边框图片的顺序:

下面是我的代码案例

Document

* {

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;

}

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

代码效果图如下：

使用CSS设置边框和背景

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

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

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

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

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

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

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

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

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

...

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

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

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

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

设置按钮背景图片(HTML-CSS)

很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用JS去操作表单的提交,即当用户点击这个图片时响应一个JS来提交表单.其实还有一种方法,就是直接设置SUBMIT按钮的图片背景.设置它的图片 ...

css 中的背景图片小技巧和存在的坑

body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...

随机推荐

c语言第一章第一节 认识变量

声明:本人大一新生,闲着无聊..写写c语言教程..菜鸟一枚..大神勿喷!!! 接下来我们都用dev来进行编译..vc++太古老了,没提示功能,不好上手,并且老是出毛病..vs太大了,编个c不至于,运行 ...

CKEditor与CKFinder的配置(ASP.NET环境)

CKEditor是一个专门使用在网页上的所得文字编辑器,适用于PHP.ASP.NET.Java等后端开发语言.CKEditor原名为FCKeditor,“FCK” 是这个编辑器的作者的名字Freder ...

Tkinter教程之Text(2)篇

本文转载自:http://blog.csdn.net/jcodeer/article/details/1811347 '''Tkinter教程之Text(2)篇''''''6.使用tag来指定文本的属 ...

PHP静态延迟绑定简单示例

没怎么用过这个新特性,其实也不算新啦,试试吧,现在静态类的继承很方便了 <?php class A { protected static $def = '123456'; public stat ...

这种方法在受到&period;NET版本和访问注册表权限时，是最佳解决方案，虽然代码看起来很多，不过下面的类直接拿走用就可以了。

public class FileContentType  {      private static IDictionary _mappings = ne ...

部署Sharding分片

这是一种将海量的数据水平扩展的数据库集群系统,数据分表存储在sharding 的各个节点上,使用者通过简单的配置就可以很方便地构建一个分布式MongoDB 集群. MongoDB 的数据分块称为 ch ...

使用原生 JavaScript 操作 DOM

原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

&lpar;转&rpar;SimpleDateFormat使用

1  SimpleDateFormat public class SimpleDateFormat extends DateFormat SimpleDateFormat 是一个以国别敏感的方式格式化 ...

ruby rails&lowbar;autolink不能加载的原因

从rails 3.1.0开始,默认在ActionView::Helper::TextHelper中的auto_link方法已经被移除,放到了第三方的gem里:rails_autolink.遂想试一下其 ...

&lbrack;Linux&rsqb;php&plus;apache 和 php&plus;nginx的区别

apache是通过mod_php来解析php nginx是通过php-fpm(fast-cgi)来解析php1. PHP 解释器是否嵌入 Web 服务器进程内部执行mod_php 通过嵌入 PHP 解 ...