1.半透明邊框

默認(rèn)情況下，背景會(huì)延伸到邊框所在的區(qū)域下層。可以通過(guò)background-clip 屬性來(lái)調(diào)整。這個(gè)屬性的初始值是border-box，意味著背景會(huì)被元素的border-box(邊框的外沿框)裁切掉。設(shè)置為padding-box，背景不會(huì)透過(guò)邊框所在的范圍，覽器就會(huì)用內(nèi)邊距的外沿來(lái)把背景裁切掉。

border: 10px solid pink;

background: red;

background-clip: padding-box;

效果如下：

2.多重邊框

實(shí)現(xiàn)的辦法入下：

(1) box-shadow的方式

它支持逗號(hào)分隔語(yǔ)法，所以可以創(chuàng)建任意數(shù)量的投影。box-shadow會(huì)跟隨元素的形狀，元素設(shè)置border-radius時(shí)，它會(huì)沿著這個(gè)圓角顯示

.div {

width: 40px;

height: 40px;

background: yellowgreen;

box-shadow: 0 0 0 10px #655,

/* 想在外圈再加一道5px 的外框，那就需要指定擴(kuò)張半徑的值為15px(10px+5px) */

0 0 0 15px deeppink,

0 2px 5px 15px rgba(0,0,0,.6);

}

效果如下：

(2)outline實(shí)現(xiàn)方案

outline的實(shí)現(xiàn)只適用于實(shí)現(xiàn)兩層邊框，通過(guò)一層border和一層outline

background: yellowgreen;

border: 10px solid #655;

outline: 5px solid deeppink;

用outline邊框樣式十分靈活，不像box-shadow 方案只能模擬實(shí)線邊框，假設(shè)我們需要產(chǎn)生虛線邊框效果，box-shadow 就沒(méi)辦法了。

outline(描邊) 不會(huì)跟隨div的圓角的設(shè)置，還是會(huì)顯示直角的樣式

3 靈活的背景定位

(1) background-position

它允許我們指定背景圖片距離任意角的偏移量，只要我們?cè)谄屏壳懊嬷付P(guān)鍵字。

/* 背景圖片跟右邊緣保持20px 的偏移量，同時(shí)跟底邊保持10px 的偏移量 */

background-position: right 20px bottom 10px;

(2) background-origin

默認(rèn)情況下，background-position 是以padding-box 為準(zhǔn)的，這樣邊框才不會(huì)遮住背景圖片。因此，top、left 默認(rèn)指的是padding-box 的左上角

background-origin，可以改變這種行為。在默認(rèn)情況下，它的值是padding-box。如果把它的值改成content-box，在background-position 屬性中使用的邊角關(guān)鍵字將會(huì)以內(nèi)容區(qū)的邊緣作為基準(zhǔn)。

每個(gè)元素身上都存在三個(gè)矩形框，border box(邊框的外沿框)、padding box(內(nèi)邊距的外沿框)和content box(內(nèi)容區(qū)的外沿框)。

background-origin的值分別是上面的三種

4.邊框內(nèi)圓角

實(shí)現(xiàn)方式是使用box-shadow和outline的方式

div {

background: tan;

border-radius: .8em;

padding: 1em;

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

outline: .6em solid #655;

}

主要原因是：描邊并不會(huì)跟著元素的圓角走(因而顯示出直角)，但box-shadow 卻是會(huì)的。

5.條紋背景

(1) 水平條紋的實(shí)現(xiàn)

/*

*0 會(huì)被解析成30%，在css的規(guī)定中如果某個(gè)色標(biāo)的位置值比整個(gè)列表中在它之前的色標(biāo)的位置值都要小，則該色標(biāo)的位置值會(huì)被設(shè)置為它前面所有色標(biāo)位置值的最大值

* 等同于 background: linear-gradient(#fb3 30%, #58a 30%);

*/

background: linear-gradient(#fb3 30%, #58a 0);

background-size: 100% 30px;

(2) 垂直條紋

background: linear-gradient(to right, #fb3 50%, #58a 0);

background-size: 30px 100%;

(3) 斜向條紋

div {

background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

}

(4) 靈活的同色系條紋

通過(guò)把最深的顏色指定為背景色，同時(shí)把半透明白色的條紋疊加在背景色之上來(lái)得到淺色條紋。好處是只需要修改一個(gè)地方就可以改變所有顏色。

div {

background-image: repeating-linear-gradient(30deg,

hsla(0, 0%, 100%, .1),

hsla(0, 0%, 100%, .1) 15px,

transparent 0, transparent 30px);

}

6.各種網(wǎng)格背景的實(shí)現(xiàn)

把多個(gè)漸變圖案組合起來(lái)，讓它們透過(guò)彼此的透明區(qū)域顯現(xiàn)時(shí)可以創(chuàng)建各種網(wǎng)格圖案。

網(wǎng)格中每個(gè)格子的大小可以調(diào)整，而網(wǎng)格線條的粗細(xì)同時(shí)保持固定時(shí)，就應(yīng)該使用長(zhǎng)度而不是百分比作為。舉例來(lái)說(shuō)，類似圖紙輔助線的網(wǎng)格就是這種情況。

div {

width: 200px;

height: 200px;

background: white;

background-image: linear-gradient(90deg,

rgba(200,0,0,.5) 50%, transparent 0),

linear-gradient(

rgba(200,0,0,.5) 50%, transparent 0);

background-size: 30px 30px;

}

div {

width: 200px;

height: 200px;

background: #58a;

background-image:

linear-gradient(white 1px, transparent 0),

linear-gradient(90deg, white 1px, transparent 0);

background-size: 30px 30px;

}

div {

background: #58a;

background-image:

linear-gradient(white 2px, transparent 0),

linear-gradient(90deg, white 2px, transparent 0),

linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),

linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);

background-size: 75px 75px, 75px 75px,

15px 15px, 15px 15px;

}

7.波點(diǎn)效果的實(shí)現(xiàn)

div {

width: 200px;

height: 200px;

background: #655;

background-image: radial-gradient(tan 30%, transparent 0),

radial-gradient(tan 30%, transparent 0);

background-size: 30px 30px;

background-position: 0 0, 15px 15px;

}

8.棋盤圖案的漸變

(1)思路是用兩個(gè)直角三角形來(lái)拼合出方塊，再把第二層漸變?cè)谒胶痛怪狈较蚓苿?dòng)貼片長(zhǎng)度的一半，就可以把它們拼合成一個(gè)完整的方塊。

div {

width: 200px;

height: 200px;

background: #eee;

background-image: linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),

linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);

background-position: 0 0, 15px 15px;

background-size: 30px 30px;

}

(2)svg的方式

svg {

background: #eee url('data:image/svg+xml,\

width="100" height="100" \

fill-opacity=".25">\

\

\

');

background-size: 30px 30px;

}

9.偽隨機(jī)背景

使用的是 “蟬原則”，就是通過(guò)質(zhì)數(shù)來(lái)增加隨機(jī)真實(shí)性。比如設(shè)計(jì)一個(gè)沒(méi)有規(guī)律的線性漸變就可以使用這種方式。

.random {

width: 200px;

height: 200px;

background: hsl(20, 40%, 90%);

background-image:

linear-gradient(90deg, #fb3 11px, transparent 0),

linear-gradient(90deg, #ab4 23px, transparent 0),

linear-gradient(90deg, #655 41px, transparent 0);

background-size: 41px 100%, 61px 100%, 83px 100%;

}

這種蟬原則，同樣適用于：

(1) 在照片圖庫(kù)中，為每幅圖片應(yīng)用細(xì)微的偽隨機(jī)旋轉(zhuǎn)效果時(shí)，可以使用多個(gè):nth-child(a) 選擇符，且讓a 是質(zhì)數(shù)。

(2) 如果要生成一個(gè)動(dòng)畫，而且想讓它看起來(lái)不是按照明顯的規(guī)律在循環(huán)時(shí)，我們可以應(yīng)用多個(gè)時(shí)長(zhǎng)為質(zhì)數(shù)的動(dòng)畫。

8.連續(xù)的圖像邊框

思路就是在圖片之上，再疊加一層純白的實(shí)色背景。為了讓下層的圖片背景透過(guò)邊框區(qū)域顯示出來(lái)，需要給兩層背景指定不同的background-clip 值。最后一個(gè)要點(diǎn)在于，在多重背景的最底層設(shè)置背景色，需要用一道從白色過(guò)渡到白色的CSS 漸變來(lái)模擬出純白實(shí)色背景的效果。

.border-img {

width: 200px;

height: 200px;

padding: 1em;

border: 1em solid transparent;

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

background-size: cover;

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

background-origin: border-box;

}

這個(gè)技巧同樣適合漸變的圖案。比如：信封的樣式。

div {

width: 200px;

height: 100px;

padding: 16px;

border: 16px 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;

}

還可以實(shí)現(xiàn)虛線滾動(dòng)框

@keyframes ants {

to {

background-position: 100%;

}

}

.dotted{

margin-top: 20px;

margin-bottom: 20px;

padding: 1em;

border: 1px solid transparent;

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

repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;

animation: ants 12s linear infinite;

}

總結(jié)

以上是生活随笔為你收集整理的html边框设置为背景同色,css边框与背景的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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