文档章节

h5-边框图片

o
 osc_g8254g7s
发布于 2019/08/19 18:57
字数 807
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1.边框图片详解

 1     <style>
 2         *{
 3             padding: 0;
 4             margin: 0;
 5         }
 6         div{
 7             width: 900px;
 8             height: 900px;
 9             margin: 100px auto;
10             border: 133px solid red;
11             /*padding: 133px;*/
12             /*添加边框图片*/
13             /*border-image-source:可以指定边框图片的路径,默认只是填充到容器四个角*/
14             /*border-image-source: url("../img/border2.jpg");*/
15             /*让他成为九宫格:border-image-slice:设置四个方向的裁切距离。fill:做内容部分的填充*/
16             /*border-image-slice: 133 fill;*/
17             /*border-image-width:边框图片的宽度。如果没有设置这个属性,那么宽度默认就是元素的原始的边框宽度。
18             细节:1.边框图片的本质是背景,并不会影响元素内容的放置  2.内容只会被容器的border和padding影响
19             建议:一般将值设置为原始的边框的宽度*/
20             /*border-image-width: 133px;*/
21             /*border-image-outset:扩展边框---一般不会用*/
22             /*border-image-outset: 0px;*/
23             /*border-image-repeat:
24             repeat:直接重复平铺
25             round:将内容缩放进行完整的重复平铺*/
26             /*border-image-repeat: round;*/
27 
28             /*缩写*/
29             /*border-image: source  slice  / width / outset  repeat;*/
30             border-image: url("../img/border2.jpg") 133 / 133px / 0px round;
31         }
32     </style>

2.边框图片小案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         div{
12             width: 1200px;
13             height: auto;
14             border: 20px solid red;
15             border-image-source: url("../img/border3.jpg");
16             border-image-slice: 20 fill;
17             border-image-width: 20px;
18             border-image-repeat: stretch;
19 
20         }
21     </style>
22 </head>
23 <body>
24 <div>边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
25     边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
26     边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
27     边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
28     边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
29     边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
30     边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
31     边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化
32     边框图片的四个角是不会拉伸的,不管盒子的大小,宽高如何变化,背景图片都都会填充满整个盒子。切四个角不会变化</div>
33 </body>
34 </html>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

unity的UGUI之中锚点(Anchors)和中心点(Pivot)、Shift和Alt键功能

在UGUI的控件属性之中,最上方的Rect Transform一栏可以看到锚点和中心点: 锚点Anchors 控件用于定位自身的基准点 可以点击左上角的方框,在其中选择锚点的不同方式: 注意图中,黄色的小点...

路过暴风
40分钟前
7
0
如何将div放置在其容器的底部? - How can I position my div at the bottom of its container?

问题: Given the following HTML: 鉴于以下HTML: <div id="container"> <!-- Other elements here --> <div id="copyright"> Copyright Foo web designs </div> </div> I would like #cop......

富含淀粉
今天
10
0
Distinct()与lambda? - Distinct() with lambda?

问题: Right, so I have an enumerable and wish to get distinct values from it. 是的,所以我有一个可枚举的,并希望从中获得不同的值。 Using System.Linq , there's of course an ext......

法国红酒甜
今天
16
0
学习编写编译器[关闭] - Learning to write a compiler [closed]

问题: Preferred languages : C/C++, Java, and Ruby. 首选语言 :C / C ++,Java和Ruby。 I am looking for some helpful books/tutorials on how to write your own compiler simply for......

技术盛宴
今天
17
0
OSChina 周一乱弹 —— 毛巾又怎么样?!我在乎的是大姐姐温柔的怀抱!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《雨 因你而下,于你而止》- Seto 手机党少年们想听歌,请使劲儿戳(这里) @Dan...

小小编辑
今天
48
2

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部