一、實現(xiàn)半透明邊框

方法：

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

background:#fff;

background-clip:padding-box;

?

二、實現(xiàn)多重邊框

方法一：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設(shè)置inset來解決。

缺點：

不能模擬虛線邊框

方法二：outline

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

outline-offset: -10px;

說明

outline-offset控制outline到元素邊緣的位置通過設(shè)置: -10px;

缺點：

1、只適用于雙邊框，不能使用,設(shè)置多值

2、不能貼合border-radius屬性，產(chǎn)生圓角

?

三、實現(xiàn)邊框內(nèi)圓角

方法：

background:tan;

border-radius:.8em;

padding:1em;

/*實現(xiàn)彎角*/

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

?

outline:.6em solid #655;

?

注意：框?qū)挾葁idth必須滿足邊

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

?

?

四、實現(xiàn)連續(xù)的圖像邊框

方法：

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;

五、實現(xiàn)信封邊框

方法一：

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

六、實現(xiàn)螞蟻行軍邊框

方法：

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揭秘》

?

總結(jié)

以上是生活随笔為你收集整理的5.（高级）CS效果之：边框border的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。