使用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; /*下边框留空白* ...
随机推荐
- MacOS系统隐藏文件操作
显示或关闭隐藏文件 显示:defaults write com.apple.finder AppleShowAllFiles -bool true ; killall Finder隐藏:default ...
- 题解 CF576D 【Flights for Regular Customers】
对每条边来说,可以走这条边的限制解除是按\(d\)的顺序,所以先对每条边按\(d\)排序. 然后考虑每两条边之间的处理,用一个矩阵表示当前走\(d\)步是否可以从一个点到另一个点,称其为状态矩阵,用另 ...
- Java代码片段
type 为Java中的任意数据类型,包括基本类型和组合类型,arrayName为数组名,必须是一个合法的标识符,[ ] 指明该变量是一个数组类型变量.例如: 这两种形式没有区别,使用效果完全一样,读 ...
- 【IJCAI2020】Split to Be Slim: An Overlooked Redundancy in Vanilla Convolution
Split to Be Slim: An Overlooked Redundancy in Vanilla Convolution, IJCAI 2020 论文地址: https://arxiv.or ...
- Markdown显示测试
这是一个一级标题 文本1 文本2 这是一个二级标题 斜体 粗体 粗斜体 下面是分割线 上面是分割线 删除线 下划线 脚注[1] 这是一个三级标题 无序列表1 内容 无序列表2 内容 无序列表3 有序列 ...
- python的__get__方法看这一篇就足够了
get类型函数 直接上代码: class TestMain: def __init__(self): print('TestMain:__init__') self.a = 1 if __name__ ...
- sql数据管理语句
一.数据管理 1.增加数据 INSERT INTO student VALUES(1,'张三','男',20); -- 插入所有字段.一定依次按顺序插入 -- 注意不能少或多字段值 如只需要插入部分字 ...
- arcgis for js 如何用contains过滤数据
添加全部数据 // 构建map容器 var view = new MapView({ container: 'mapId', map: map }); /******************** * ...
- gerrit安装指南
Gerrit的基本介绍 Gerrit 是一个Git服务器,它基于 git 版本控制系统,使用网页界面来进行审阅工作.Gerrit 旨在提供一个轻量级框架,用于在代码入库之前对每个提交进行审阅,更改将上 ...
- Python创建字符串
Python创建字符串: 一般情况下可以使用 ' 或 " 创建字符串 或 使用引用字符串变量 或 字符串表达式. # 字符串的创建 # 使用 ' 或 “ 进行创建 strs = 'ABCDE ...