h5-边框图片
2024-10-08 16:04:46
1.边框图片详解
<style>
*{
padding:;
margin:;
}
div{
width: 900px;
height: 900px;
margin: 100px auto;
border: 133px solid red;
/*padding: 133px;*/
/*添加边框图片*/
/*border-image-source:可以指定边框图片的路径,默认只是填充到容器四个角*/
/*border-image-source: url("../img/border2.jpg");*/
/*让他成为九宫格:border-image-slice:设置四个方向的裁切距离。fill:做内容部分的填充*/
/*border-image-slice: 133 fill;*/
/*border-image-width:边框图片的宽度。如果没有设置这个属性,那么宽度默认就是元素的原始的边框宽度。
细节:1.边框图片的本质是背景,并不会影响元素内容的放置 2.内容只会被容器的border和padding影响
建议:一般将值设置为原始的边框的宽度*/
/*border-image-width: 133px;*/
/*border-image-outset:扩展边框---一般不会用*/
/*border-image-outset: 0px;*/
/*border-image-repeat:
repeat:直接重复平铺
round:将内容缩放进行完整的重复平铺*/
/*border-image-repeat: round;*/ /*缩写*/
/*border-image: source slice / width / outset repeat;*/
border-image: url("../img/border2.jpg") 133 / 133px / 0px round;
}
</style>
2.边框图片小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 1200px;
height: auto;
border: 20px solid red;
border-image-source: url("../img/border3.jpg");
border-image-slice: 20 fill;
border-image-width: 20px;
border-image-repeat: stretch; }
</style>
</head>
<body>
<div>边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化</div>
</body>
</html>
最新文章
- [Unity3D插件]2dToolKit系列三 碰撞检测功能的实现以及障碍物的随机摆放
- php代码优化系列 -- array_walk 和 foreach, for 的效率的比较
- linux上使用amoeba实现MySql集群,以及读写分离,主从复制
- Ubuntu-搜狗输入法
- 精简CSS代码
- 开发Android 范的错误
- T4模板试水篇1_入门
- IOS学习之路五(SpriteKit 开发飞机大战小游戏一)
- JAVAEE学习笔记
- DATAGUARD常用管理命令
- $(document).ready()和onload() html渲染时的区别
- ORA-12705
- Oracle12.2中新增的分区功能
- C# 线程池执行操作例子
- poj1743 Musical Theme【后缀数组】【二分】
- 转:实现OC与JS的简易交互
- Install-DedupCore.component 的内容
- eclipse修改默认注释
- Xilinx问题查找
- 课时47.datalist标签(了解)