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