border Awesome CSS

在前端开发中,经常面临一些特殊图形的需求。 那么每次都用图片就会很麻烦,所以能使用代码完成的就用代码完成。 此文先总结 border

CSS Background and Borders:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSSBackgroundand_Borders
使用border background gradient 配合 ,很好玩,有出乎意料的结果

演示地址: http://lwxyfer.github.io/demoList/cssSharp.html

[TOC]

border

https://developer.mozilla.org/en-US/docs/Web/CSS/border 可以看到border有一堆属性

https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
border-style:
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

https://developer.mozilla.org/en-US/docs/Web/CSS/border-color border-color
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image border-image
http://www.w3cplus.com/content/css3-border-color 这个是只有firefox支持的,没啥用

border-radius

http://www.w3cplus.com/css3/border-radius

单独设置每个角,并且每个角 X & Y大小不同。 所以出来的图形也很好玩。

border-top-left-radius: 10px 20px;  
border-bottom-right-radius: 10px 20px;  
border-top-right-radius: 20px 10px;  
border-bottom-left-radius: 20px 10px;  

圆形 椭圆 圆角矩形

.element {
  height: 500px;
  width: 500px;
  border-radius: 50%;
}

border四边与元素大小配合

可玩性较高

三角形

.triangle {
  height: 0;
  width: 0;
  border-left: 100px solid red;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-top: 100px solid transparent;
}

梯形

.trapezium {
  border-bottom: 100px solid #333;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 100px;
}

border-image

https://css-tricks.com/understanding-border-image/
http://www.norabrowndesign.com/css-experiments/border-image-anim.html

border-width:50px;  
border-image: url(my-image.gif) 25% 30% 10% 20% repeat round stretch;  

属性分为3个部分:

  • 上面的图片地址 或使用 gradient
  • 四边大小 使用 固定值 或者 百分比
  • repeat round stretch 可对每一条边分别设置

*通过实例,border-radius 不能影响 border-image *

border-image won't do anything if you don't specify a width for your border. 必须设置边框的大小

browser compatibility: 加入私有前缀即可

border: 15px solid transparent;  
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;