1.半透明邊框

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

border: 10px solid pink;

background: red;

background-clip: padding-box;

效果如下：

2.多重邊框

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

(1) box-shadow的方式

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

.div {

width: 40px;

height: 40px;

background: yellowgreen;

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

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

0 0 0 15px deeppink,

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

}

效果如下：

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

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

background: yellowgreen;

border: 10px solid #655;

outline: 5px solid deeppink;

用outline邊框樣式十分靈活，不像box-shadow 方案只能模擬實線邊框，假設我們需要產生虛線邊框效果，box-shadow 就沒辦法了。

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

3 靈活的背景定位

(1) background-position

它允許我們指定背景圖片距離任意角的偏移量，只要我們在偏移量前面指定關鍵字。

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

background-position: right 20px bottom 10px;

(2) background-origin

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

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

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

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

4.邊框內圓角

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

div {

background: tan;

border-radius: .8em;

padding: 1em;

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

outline: .6em solid #655;

}

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

5.條紋背景

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

/*

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

* 等同于 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) 靈活的同色系條紋

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

div {

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

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

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

transparent 0, transparent 30px);

}

6.各種網格背景的實現(xiàn)

把多個漸變圖案組合起來，讓它們透過彼此的透明區(qū)域顯現(xiàn)時可以創(chuà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.波點效果的實現(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)思路是用兩個直角三角形來拼合出方塊，再把第二層漸變在水平和垂直方向均移動貼片長度的一半，就可以把它們拼合成一個完整的方塊。

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.偽隨機背景

使用的是 “蟬原則”，就是通過質數(shù)來增加隨機真實性。比如設計一個沒有規(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) 在照片圖庫中，為每幅圖片應用細微的偽隨機旋轉效果時，可以使用多個:nth-child(a) 選擇符，且讓a 是質數(shù)。

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

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

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

.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;

}

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

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;

}

還可以實現(xiàn)虛線滾動框

@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;

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。