html中border怎么写,CSS border属性--妙用

在ie下实现圆角效果

(由于border-radius兼容性特别差，所以要在ie低版本浏览器下实现圆周角效果特别难)

利用border-style的dotted效果可实现如下图所示的圆效果：

代码简单如下

Document

.box {

width: 150px;

height: 150px;

overflow: hidden;

}

.dotted {

width: 100%;

height: 100%;

border: 149px dotted red;

}

制作三杠icon效果

其实就是利用border-style double特性

hover变色

我们在做如下图标时，

一般情况下hover时会有三处变色

但是利用border-color继承自color这一特性hover时可以只改一处，如下简便的写

利用透明边框使得图片定位容器右侧变得容易

一般background-position是距离左上角定位的，比方说我想要距离上边50px 左边40px，可以

background-position: 50px 40px;

但是如果想要让图片距离距离下边40px 右边50px 怎么办呢？

border-right: 50px solid transparent;

background-position: 100% 40px;

上面代码就实现了这个功能，主要原因是background-position是不把border计算在内的，所以100%......

制作三角效果

从最简单的看起

利用边框增加点击区域响应范围

利用border点击后有响应，再配合box-shadow可增加响应区域大小

实现两栏等高布局

.box {

border-left: 300px solid transparent;

}

.left {

width: 300px;

margin-left: -300px;

float: left;

}

这里是左边栏内容

不管我右边栏内容多高，两边都是等高的，而且没有任何浏览器兼容性问题

总结：

1)border-width不支持百分比，因为边框不会因为元素尺寸的变化而缩放，类似的outline、box-shadown、text-shadow......都是不支持百分比的

2)border-color、text-shadown、drop-shadown、outline等都是从color继承来的