使用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; /*下边框留空白* ...
随机推荐
- 设计模式：template method模式
思想:在父类中定义处理流程的框架,在子类中实现具体的处理方法 优点:在父类中定义处理的算法,无需在每个子类中重复编写 继承关系图: 例子: //接口定义 class Parent { public: ...
- layui 数据表格自带的导出Excel,身份证等E+/000问题解决
layui数据表格的工具栏自带导出Excel 会将身份证等 长整数的 自动变成E+并且 后面有000.从而导致数据不能完整导出. 解决方案: 1.先下载Excel的插件包.将压缩包内的两个js放到 l ...
- .NET Core 发布到 IIS
①右键项目->属性 将生成配置为Release ②右键项目->重新生成 ③提示生成成功后,右键项目->发布 点击新建,-> 这一步可以选择文件系统, 也可以选择IIS FT 以 ...
- 【Laravel】 常用的artisian命令
全局篇 查看artisian命令 php artisan php artisan list 查看某个帮助命令 php artisan help make:model 查看laravel版本 php a ...
- laravel 数据分页简单示例
控制器代码:只需用paginate($pageSize)方法查询数据即可 $pageSize:每页显示的记录数 public function index() { $data = Member::pa ...
- Java Script 数组
数组:有许多变量的集合,它们的名称和数据类型都是一致的. 定义 操作(添加修改) Var arr=new Array(): Var arr=[ ]; //定义 Var arr1=[ 1,2,3, ...
- js：事件（注册、解绑、DOM事件流、事件对象、事件委托）
1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> va ...
- MYSQL_详细基本命令
修改新密码:use mysql:update user set password='新密码' where user='用户名':flush privileges: 更新权限 增加新用户:grant ...
- 如何查看Oracle的版本
本人使用的软件是DataGrip 在控制台输入 select * from v$version;
- HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型
本教程案例在线演示 有路网PC端 有路网移动端 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页分割为独立的.不同的部分. 可以看成 ...