5.（高级）CS效果之：边框border

一、实现半透明边框

方法：

border:10px solid hsla(0,0%,100%,.5);

background:#fff;

background-clip:padding-box;

 

二、实现多重边框

方法一：box-shadow

background:yellowgreen;

box-shadow:0 0 0 10px #655,0 0 0 15px #deeppink;

说明

box-shadow中15px，由于之前10px被挡住，显示出来只有5px;

注意：

1、box-shadow不会影响布局，不受box-size的影响。

2、box-shadow不会影响鼠标事件，需要box-shadow设置inset来解决。

缺点：

不能模拟虚线边框

方法二：outline

background:#655;
outline:1px dashed #fff;

outline-offset: -10px;

说明

outline-offset控制outline到元素边缘的位置通过设置: -10px;

缺点：

1、只适用于双边框，不能使用,设置多值

2、不能贴合border-radius属性，产生圆角

 

三、实现边框内圆角

方法：

background:tan;

border-radius:.8em;

padding:1em;

/*实现弯角*/

box-shadow:0 0 0 .6em #655;

 

outline:.6em solid #655;

 

注意：框宽度width必须满足边

border-radius*(1.414-1)<border-shadow<outline

 

 

四、实现连续的图像边框

方法：

padding: 1em;

border: 1em solid transparent;

background: linear-gradient(white,white),url(2.56.jpg);

background-size: cover;

background-clip: padding-box,border-box;

 

/*默认background-origin:padding-box*/

background-origin: border-box;

简写：

padding: 1em;

border: 1em solid transparent;

background: linear-gradient(white,white) padding-box,url(2.56.jpg) border-box 0/cover;

五、实现信封边框

方法一：

padding: 1em;

border: 1em solid transparent;

background: linear-gradient(white,white) padding-box,

            repeating-linear-gradient(-45deg,red 0,red 12.5%,

            transparent 0,transparent 25%,#58a 0,#58a 37.5%,

             transparent 0,transparent 50%)  0/5em 5em;

方法二：

padding: 1em;
border: 16px solid transparent;
border-image:16 repeating-linear-gradient(-45deg,red 0,red 1em,

transparent 0,transparent 2em, #58a 0,#58a 3em,transparent 0,transparent 4em);

注意：

1、border-width=border-image-slice=16px，需要同时修改两处

2、border-image-slice不能使用em

六、实现蚂蚁行军边框

方法：

padding: 1em;

border: 1em solid transparent;

background: linear-gradient(white,white) padding-box,

            repeating-linear-gradient(-45deg,red 0,red 12.5%,

            transparent 0,transparent 25%,#58a 0,#58a 37.5%,

             transparent 0,transparent 50%)  0/5em 5em;

animation: ants 12s linear infinite;

@keyframes ants { to {background-position: 100%}}

 

 

 

 

 

 

 

 

 

 

 

 

 

声明：以上方法参考《CSS揭秘》