html 5border属性,CSS3：不可思议的border属性

在CSS中，其border属性有很多的规则。对于一些事物，例如三角形或者其它的图像，我们仍然使用图片代替。但是现在就不需要了，我们可以用CSS形成一些基本图形，我分享了一些关于这方面的技巧。

1、正三角形：

.triangle_up

{

height:0px; width:0px;

border-bottom:50px solid #006633;

border-left:50px solid transparent;

border-right:50px solid transparent;

}

2、倒三角形：

.triangle_down

{

height:0px; width:0px;

border-top:50px solid #006633;

border-left:50px solid transparent;

border-right:50px solid transparent;

}

3、左三角形

.triangle_left

{

height:0px; width:0px;

border-left:50px solid #006633;

border-top:50px solid transparent;

border-bottom:50px solid transparent;

float:left;

}

4、右三角形

.triangle_right

{

height:0px; width:0px; float:left;

border-right:50px solid #006633;

border-top:50px solid transparent;

border-bottom:50px solid transparent;

}

5、十字街效果

.crossSquare

{

height:0px; width:0px;

border-right:50px solid blue;

border-top:50px solid gray;

border-bottom:50px solid red;

border-left:50px solid yellow;

}

CSS3：不可思议的border属性&Web字体图标Font Awesome

CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

CSS：不可思议的border属性

原文:Magic of CSS border property 译文:不可思议的CSS border属性 译者:dwqs 在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的 ...

CSS3外轮廓属性

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...

重温CSS：Border属性

边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

css3 的box-sizing属性理解

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...

CSS3的box-sizing属性

盒模型的宽度,在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内 W3C标准中的盒模型宽度为内容宽度,不包括内边距paddin ...

CSS3新增文本属性实现图片点击切换效果