属性：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
在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： ; -moz-border-right-colors： ; -moz-border-bottom-colors： ; -moz-border-left-colors： ;} 我们这时给每一条边框都设置了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; }效果:
border-radius相信很多前端ers都很熟悉了，就是元素圆角效果。这个属性兼容了ie9+以及其他主流现代浏览器。
基本写法：
设置统一半径的圆角：border-radius：
设置多个半径的圆角： border-radius：
设置水平垂直半径不统一的圆角：border-radius：
分开设置：
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-left-radius:
为兼容其他老版本的的浏览器，需要为其加上前缀，并且写法有点区别：
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;
}
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
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，显示在最顶层；第二层阴影显示在第一层阴影之下，此时因为第一层阴影的扩展半径>第二层阴影的扩展半径，所以第一层阴影会把第二层阴影覆盖掉。
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
