CSS的边框
属性:border-style
、border-width
、border-color
写法:
分开写:E {border-style: solid;border-width: 1px;border-color: alicebule;}
合并写:E {border: 1px solid alicebule;}
注意:
border-style
是必须属性,其他顺序可以打乱写如果设定
border:none
,浏览器自动解析为border-style:none
边框大小即
border-width
默认为medium
css3新增:border-color
、border-image
、border-radius
CSS3:border-color
在css2中,我们可以运用border-color
属性给元素的边框整体或者每一条边框上色,但是每条边框最多只能使用一种颜色。
而css3改进的border-color
属性为我们提供了同一条边框设置多种颜色(比如说给边框添加一个渐变色,或者说一个彩色)的途径。不过到目前为止只有Firefox 3.0+的浏览支持这个属性。也是因为这一点,css3的border-color
应用是相当的少。
上文提到过,css3border-color
只有FF支持,故运用或测试时我们需要加上-moz-
前缀。
用法:
.box{
border:5px solid transparent;
-moz-border-top-colors:<color1> <color2> <color3> <color4> <color5>;
-moz-border-right-colors:<color1> <color2> <color3> <color4> <color5>;
-moz-border-bottom-colors:<color1> <color2> <color3> <color4> <color5>;
-moz-border-left-colors:<color1> <color2> <color3> <color4> <color5>;
}
我们这时给每一条边框都设置了5种颜色,且都占据着5px的宽度。这个时候每种颜色的border-width为1px。事实上,如果我们边框设置了x个像素的宽度,并且为每条边框设置了y种颜色,若x>y,则前y-1种颜色每种占据了1px,最后一种颜色占据x-y+1个像素。
实例:立体渐变效果
.box {
width: 200px;
height: 100px;
border: 10px solid transparent;
border-radius: 15px 0 15px 0;
-moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
}
效果:
CSS3:border-radius
border-radius相信很多前端ers都很熟悉了,就是元素圆角效果。这个属性兼容了ie9+以及其他主流现代浏览器。
基本写法:
设置统一半径的圆角:
border-radius:<length>
设置多个半径的圆角:
border-radius:<top-left> <top-right> <bottom-right> <bottom-left>
设置水平垂直半径不统一的圆角:
border-radius:<horizontal-length> / <vertical-length>
-
分开设置:
border-top-left-radius:<length> / <length>
border-top-right-radius:<length> / <length>
border-bottom-left-radius:<length> / <length>
border-bottom-left-radius:<length> / <length>为兼容其他老版本的的浏览器,需要为其加上前缀,并且写法有点区别:
FF:-moz-border-radius-topleft
Chrome:-webkit-border-top-left-radius图解CSS3中提到webkit内核浏览器下图片没有圆角效果,经过测试(基于当前本人的chrome 44+的版本)webkit内核较新版本的浏览器已经修正了这个问题。如下图
Chrome下:
FF下:
border-radius
还可以做出如圆、半圆、四分之一圆、椭圆的效果:
-
圆:
.box {
height: 100px; width: 100px; border-radius:100px;/*或者50%*/ background: aliceblue; margin: 20px;
}
-
半圆:
.box {
height: 100px; width: 50px; border-radius: 50px 0 0 50px;/*分表表示左上角 右上角 右下角 左下角*/ background: aliceblue;
}
-
四分之一圆:
.box {
height: 100px; width: 50px; border-radius: 50px 0 0 0;/*分表表示左上角 右上角 右下角 左下角*/ background: aliceblue;
}
-
椭圆:
.box {
height: 100px; width: 50px; border-radius: 25px / 50px;/*分表表示水平半径 垂直半径。或者50% / 50%;*/ background: aliceblue;
}
CSS3:border-image
border-image
属性用以给任何元素(除border-collapse
属性为collapse
的table
元素)设置图片效果边框,可以用来制作圆角按钮效果,渐变tabs效果等。border-image
允许你使用一张小图片,并且将它分割成九个小部分, 然通过延伸这个小部分使其构成一个更大的元素。
注意 ie并不支持border-image
写法:
border-image: url top right bottom left x-repeat y-repeat
url:采用的图片的路径
top,right,bottom,left:图片的切割方法,注意是不需要加单位的(加了会失效)。默认是px,但可以使用百分比
如图:
图片切割方式:
这里通过两个实例来说明图片切割方式:
通过切割左边的小图片,使其延展+拼接成右边的大图。
若是我们进行如下的分割:
这样图片的切割长度分别为:0(上) 30(右) 0(下) 30(左)
现在的情况就等于用4、6两块小图进行拼接和延伸:
很容易发现,只要我们在水平和垂直方向进行延展就会达成效果图的样子了。
如果图片切割成这样:
就会发现实际效果中,会多出上下边框的宽度。其他没有变化。
图片铺排方式:
左图水平和垂直方向都是stretch
,右图水平是stretch
,垂直是round
图一水平和垂直均为round
,图二水平和垂直均为stretch
,图三均为repeat
参考文章:Click
CSS3:box-shadow
box-shadow
用来定义元素的盒子阴影。
IE8及以前的浏览器不支持box-shadow
用法:
border-shadow: 阴影类型 水平位移 垂直位移 模糊半径 阴影扩展半径 颜色
阴影类型默认为: 外阴影,可设定唯一值:inset
水平位移:x-offset。可取正负值,正值阴影在元素右方。
垂直位移:y-offset。可取正负值,正值阴影在元素下方。
模糊半径:值只能为正,取值越大,阴影边缘越模糊。
阴影扩展半径:可取正负值。若无模糊半径,设置了扩展半径和为元素设置边框的效果一致。
多层阴影:
box-shadow可以多层阴影同时使用,每层阴影之间使用“,”隔开。设置在最前的阴影将显示在最顶层,所以一定要注意阴影的大小取值。
若阴影的设置为:0 0 0 20px lime, 0 0 0 10px yellow, 0 0 0 8px green
则这时第一层阴影的扩展半径为20,显示在最顶层;第二层阴影显示在第一层阴影之下,此时因为第一层阴影的扩展半径>第二层阴影的扩展半径,所以第一层阴影会把第二层阴影覆盖掉。
<End>