装饰边框css [英] Decorative border css

查看:170
本文介绍了装饰边框css的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在研究一段时间,仍然找不到一个方法来使这个边界在CSS,到目前为止我只有一方。





我的意思是边框与css不与图片

解决方案

这是可以与css3。查看: https://developer.mozilla.org/es/docs / Web / CSS / border-image



首先:按照通常的方式定义边框的宽度( border: 30px solid ... );
然后使用border-image指定图像的特征:



- 您需要使用ulr()设置图像。



- 以px(无单位)或百分比(%)设置如何切分图像以创建边框。请注意,为了平铺边框,图像被切成9个扇区。这个数字是从这个切片的边界的距离。例如,在这种情况下,在300x300像素的情况下,如果你将它切成100,你将生成9个100x100的正方形。



- 最后说如果它应该重复,圆形或拉伸。



提示:这有点困难,所以我的建议是,你使你的图像在3x3网格,这种方式角落将适合边。



  .box {width:200px; height:200px;背景:#EEE; border:30px solid transparent; border-image:url(http://i62.tinypic.com/2dh8y1g.jpg)100 round;}  

 < div class =box>< / div>   



不再需要供应商前缀: http://caniuse.com/#search=border-image


I've been researching for a while and still can't find a way to make this border on css, so far I've made only one side.

I mean the same border with css not with the picture

解决方案

This is posible with css3. Take a look: https://developer.mozilla.org/es/docs/Web/CSS/border-image

First: define the width of your border, as you would usually do (border: 30px solid...); Then specify the caracteristics of the image with border-image:

-You need to set the image with ulr().

-Then set in px (no units) or percentage (%) how to slice the image to create the borders. Notice that to tile the border the image gets sliced in 9 sectors. This number is the distance from the borders of this slice. For example, in a 300x300 px like in this case, if you slice it at 100, you are generating 9 squares of 100x100.

-Finally say if it should repeat, round or stretch.

A tip: this is a bit difficult so my advice is that you make your image tilable in a 3x3 grid, this way the corners will fit the sides.

.box{
  width: 200px;
  height: 200px;
  background: #EEE;
  border: 30px solid transparent;
  border-image: url("http://i62.tinypic.com/2dh8y1g.jpg") 100 round;
}

<div class="box"></div>

Vendor prefixes arent very necesary any more: http://caniuse.com/#search=border-image

这篇关于装饰边框css的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆