设为首页|加入收藏| 联系站长

网站首页工作总结

彻底弄懂CSS3中的Border属性

发布时间:2017/3/30 16:32:19 编辑:YAN秀 阅读( 来源:本站原创

一、前言

利用CSS3的border属性可以生成一些图形,例如三角或是圆角(当然这只是最基本的)。纯粹的CSS的内容,当然肯定有些兼容性问题,本站中就发表过css3创建不规则图形的源码。就是Css3中的border的各种属性。我觉得此技术相当实用的,故本文就详细叙述一下border的各种属性。好了,裹脚布的话就不说了,直接进入正题。

border-color属性:transparent

transparent,英译过来就是透明的意思,在这里的作用也就是将其透明化,通俗点说就是将边框的颜色变成无色,使其透明。在了解其真正意义之前,我们先写出一个边框

.box{ 
	width:60px;
	height:60px;
	border:20px solid #CCC;	
}

彻底弄懂CSS3中的Border属性

效果如上,但是这样我们看不出任何效果,就是平常的一个边框加宽高,所以这里我们稍微调整一下写法,将上下左右四个边框,赋予不同的颜色,或者我们不赋予元素宽高(即是元素的宽高为零)又会有什么样式的效果展示呢?我们来试试效果

.box{ 
	width:60px;
	height:60px;                   
	border-top:20px solid #CCC;    /*上边框的颜色及边距*/
	border-right:20px solid #000;  /*右边框的颜色及边距*/
	border-bottom:20px solid #F00; /*下边框的颜色及边距*/
	border-left:20px solid #FF0;   /*左边框的颜色及边距*/
}
.box2{
	width:0px;
	height:0px; 
	border-top:50px solid #CCC;    /*上边框的颜色及边距*/
	border-right:50px solid #000;  /*右边框的颜色及边距*/
	border-bottom:50px solid #F00; /*下边框的颜色及边距*/
	border-left:50px solid #FF0;   /*左边框的颜色及边距*/
}

彻底弄懂CSS3中的Border属性

以上我们才真正了解到了border的属性,这时我们的transparent才能真正派上用场,基于以上我们现在不妨设想一下,将其中三个颜色隐藏掉,或者是边框距不同是不是就是可以得到不同形状的图形啦

.box{ 
	width:60px;
	height:60px;                   
	border-top:20px solid #CCC;           /*没有透明*/
	border-right:20px solid transparent;  /*颜色透明*/
	border-bottom:20px solid transparent; /*颜色透明*/
	border-left:20px solid transparent;   /*颜色透明*/
}
.box2{
	width:0px;
	height:0px; 
	border-top:50px solid transparent;    /*颜色透明*/
	border-right:50px solid transparent;  /*颜色透明*/
	border-bottom:50px solid #F00;        /*没有透明*/
	border-left:50px solid transparent;   /*颜色透明*/
}

彻底弄懂CSS3中的Border属性

更多图形效果,请点击此处

border-radius属性详解

border-radius: none | length{1,4} [/ length{1,4}

其中每一个值可以为 数值或百分比的形式。

length/length 第一个lenght表示水平方向的半径,而第二个表示竖直方向的半径。

如果是一个值,那么 top-left、top-right、bottom-right、bottom-left 四个值相等;如果是两个值,那么 top-left和bottom-right相等,为第一个值,top-right和bottom-left值相等,为第二个值;如果是三个值,那么第一个值是设置top-left,而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right;如果是四个值,那么第一个值是设置 top-left, 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left

彻底弄懂CSS3中的Border属性

除了上述的简写外,还可以和border一样,分别写四个角,如下:

border-top-left-radius: //左上角 
border-top-right-radius: //右上角 
border-bottom-right-radius: //右下角 
border-bottom-left-radius: //左下角

分别是水平方向和竖直方向半径,第二值省略的情况下,水平方向和竖直方向的半径相等。

border-radius 只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式,对于老版的浏览器,border-radius 需要根据不同的浏览器内核添加不同的前缀,比说 Mozilla 内核需要加上"-moz",而 Webkit 内核需要加上"-webkit"等,但是IE和Opera没有私有格式,因此为了最大程度的兼容浏览器,我们需要设置如下:

-webkit-border-radius: 10px 20px 30px; 
-moz-border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px;

请将标准形式写在浏览器私有形式之后。举例子看一下效果:

<style>
    div{display: inline-block; border: 10px solid red;margin: 100px;}
    .div1{width: 200px; height: 100px;border-radius: 0px 50px 32px/28px 50px 70px;}
    .div2{width:100px; height: 200px; border-radius: 26px 106px 162px 32px/28px 80px 178px 26px;}
    .div3{width:100px;height: 200px; border-radius: 20px 50px/ 20px 50px;}
</style>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

效果如下所示:

彻底弄懂CSS3中的Border属性

border-images属性详解

0% (0)
0% (10)