使用css设置边框背景图片
使用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设置边框背景图片的更多相关文章
- css 设置body背景图片铺满
background-image: url(../../../assets/images/workflow/work.png); background-repeat: no-repeat; backg ...
- 使用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实现的方法: <html> <head> ...
- Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...
- CSS设置标签、图片放大、缩小、旋转、移动(tranform)
CSS设置标签.图片放大.缩小.旋转.移动(tranform) 1.缩小和放大属性(scale) 格式:tranform:缩小类型(数值): 注意:缩小和放大都是 scale : 其中的值(0~1)代 ...
- CSS设置边框、符号、背景样式、链接属性
一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...
随机推荐
- 17 个 Python 特别实用的操作技巧，记得收藏！
Python 是一门非常优美的语言,其简洁易用令人不得不感概人生苦短.在本文中,作者 Gautham Santhosh 带我们回顾了 17 个非常有用的 Python 技巧,例如查找.分割和合并列表等 ...
- 【日常摘要】- RabbitMq实现延时队列
简介 什么是延时队列? 一种带有延迟功能的消息队列 过程: 使用场景 比如存在某个业务场景 发起一个订单,但是处于未支付的状态?如何及时的关闭订单并退还库存? 如何定期检查处于退款订单是否已经成功退款 ...
- 完美解决pycharm 不显示代码提示问题
pycharm 不显示代码提示 1.检查IDE省电模式是否关闭状态!!! file → power save mode 取消掉 2.检查代码提示是否成功开启. setting → Inspection ...
- 小书MybatisPlus第6篇-主键生成策略精讲
本文为mybatis系列文档的第6篇,前5篇请访问下面的网址. 小书MybatisPlus第1篇-整合SpringBoot快速开始增删改查 小书MybatisPlus第2篇-条件构造器的应用及总结 小 ...
- Spring事务处理时自我调用
1.预备知识 aop概念请参考[http://www.iteye.com/topic/1122401]和[http://jinnianshilongnian.iteye.com/blog/141859 ...
- 第33课 C++中的字符串
1. 历史遗留问题及解决方案 (1)历史遗留问题 ①C语言不支持真正意义上的字符串------c语言是用字符数组实现字符串 ②C语言用字符数组和一组函数模拟字符串操作 ③C语言不支持自定义类型,因此无 ...
- office 2016激活方法windows
安装office 2016 win+R,输入“cmd” 根据系统位数和安装的office位数选择相应的命令 OFFICE 64位 和 WINDOWS 64位 cscript "C:\Prog ...
- luogu P5043 【模板】树同构 hash 最小表示法
LINK:模板 树同构 题目说的很迷 给了一棵有根树 但是重新标号 言外之意还是一棵无根树 然后要求判断是否重构. 由于时无根的 所以一个比较显然的想法暴力枚举根. 然后做树hash或者树的最小表示法 ...
- 使用IDEA生成jar包的步骤（IDEA打jar包）
第一步: 1.把module目录下的MATA-INF文件夹删除,如果没有MATA-INF文件夹则不用删除 2.Ctrl + Alt + Shift + S 打开 Project Structure 窗 ...
- Python接口自动化测试框架: pytest+allure+jsonpath+requests+excel实现的接口自动化测试框架(学习成果)
废话 最近在自己学习接口自动化测试,这里也算是完成一个小的成果,欢迎大家交流指出不合适的地方,源码在文末 问题 整体代码结构优化未实现,导致最终测试时间变长,其他工具单接口测试只需要39ms,该框架中 ...