CSS各種邊框背景大全

信ID：WEB_wysj(點擊關注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

（頁底留言開放，歡迎來吐槽）

● ● ●

1、半透明邊框

難題：直接設置一個半透明的邊框不起作用。

解決方案：padding-box盒模型border:10px solid rgba(255,255,255,.5);background: white;background-clip: padding-box;

2、多重邊框

背景知識:box-shadow 的基本用法

box-shadow: X軸偏移量 Y軸偏移量 [模糊半徑] [擴展半徑] [陰影顏色] [投影方式];

解決方案一：

利用box-shadow的屬性擴張半徑background: 
yellowgreen;box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);
特點：box-shadow 方案只能模擬實線邊框，會貼合元素的圓角

解決方案二：outline 方案background: yellowgreen;border: 10px solid #655;outline: 5px solid deeppink;特點：實現的“邊框”不會貼合元素的圓角，可以實現虛線邊框

3、靈活的背景定位

示例：實現一個背景圖在div右下角，距離右邊10px 下邊10px 如圖;

解決方案一：background-position擴展方案background: #58a url(code-pirate.svg) no-repeat bottom right;background-position: right 10px bottom 10px;

解決方案二：background-origin 方案padding: 10px;background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */background-origin: content-box;

解決方案三：calc 方案background: url("code-pirate.svg") no-repeat;background-position: calc(100% - 20px) calc(100% - 10px);

4、邊框內圓角

兩個div很容易實現，那么一個div呢？

解決方案：利用box-shadow和outlinebackground: tan;border-radius: .8em;padding: 1em;outline: .6em solid #655;box-shadow: 0 0 0 .4em #655;

box-shadow的寬要小于outline寬度值，大于 (Math.sqrt(2)-1)r（這里的 r 表示 border-radius）

5、條紋背景

背景知識：CSS 線性漸變，background-size

案例一：等寬的雙色水平條紋

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

案例二：不等寬的雙色水平條紋

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

案例三：三色水平條紋

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;

案例四：垂直條紋

background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);background-size: 30px 100%;

案例五：斜向條紋

失敗方案：改變 background-size 的值和漸變的方向background: linear-gradient(45deg, #fb3 50%, #58a 0);background-size: 30px 30px;

正確方案：做到無縫拼接(60度的條紋不好做)background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;

優化方案：重復漸變做60度條紋background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);height:100%;

案例六：靈活的同色系斜向條紋

在大多數情況下，我們想要的條紋圖案并不是由差異極大的幾種顏色組成的，這些顏色往往屬于同一色系。

失敗方案：沒有任何瀏覽器支持下面這個特性background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);正確方案：不再為每種條紋單獨指定顏色，而是把最深的顏色指定為背景色，同時把半透明白色的條紋疊加在背景色之上來得到淺色條紋background: #58a;background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);

6、復雜的背景圖案

背景知識：CSS 漸變，“條紋背景”

CSS3 圖案庫lea.verou.me/css3patterns

7、偽隨機背景

背景知識：CSS 漸變，“條紋背景”，“復雜的背景圖案”

大自然不會以“無縫”貼片的方式重復自己......

蟬原則：通過質數來增加隨機真實性

蟬漸變圖案：條紋圖案把不同尺寸的漸變圖案疊加起來，并使用質數來增加隨機的真實感

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

8、連續的圖像邊框

背景知識：CSS 漸變，基本的 border-image，“條紋背景”，基本的 CSS 動畫案例一：一個元素有一圈裝飾性的邊框，基本上就是一張圖片被裁剪進了邊框所在的方環區域。不僅如此，我們還希望這個元素的尺寸在擴大或縮小時，這幅圖片都可以自動延伸并覆蓋完整的邊框區域。

最簡單的辦法是使用兩個HTML 元素：一個元素用來把我們的石雕圖片設為背景，另一個元素用來存放內容，并設置純白背景，然后覆蓋在前者之上。問題來了：如果只用一個元素，我們能做到這個效果嗎？

解決方案：padding: 1em;border: 1em solid transparent;background:linear-gradient(white, white) padding-box,url(stone-art.jpg) border-box 0 / cover;

案例二；老式信封樣式的邊框

案例三：螞蟻行軍邊框

@keyframes ants { to { background-position: 100% } }.marching-ants {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;}

案例四：邊框的裁切效果，用來模擬傳統的腳注

border-top: .2em solid transparent;border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);padding-top: 1em;

干貨！免費領取騰訊高級講師網頁設計教程

點我領取

???

關注網頁設計自學平臺，99%的努力都在這里

▼無法識別二維碼可以點「閱讀原文」噢！

SS 可以添加背景顏色和背景圖片，以及來進行圖片設置。

background-color 背景顏色
background-image 背景圖片地址
background-repeat 是否平鋪
background-position 背景位置
background-attachment 背景固定還是滾動
背景的合寫（復合屬性） background:背景顏色背景圖片地址背景平鋪背景滾動背景位置

背景圖片(image)

語法：

background-image : none | url (url)

參數：

none : 　無背景圖（默認的）

url : 　使用絕對或相對地址指定背景圖像

background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。如果圖片不重復地話，圖片覆蓋不到地地方都會被背景色填充。如果有背景圖片平鋪，則會覆蓋背景顏色。

小技巧：我們提倡背景圖片后面的地址，url不要加引號。

背景平鋪（repeat）

語法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

參數：

repeat : 　背景圖像在縱向和橫向上平鋪（默認的）

no-repeat : 　背景圖像不平鋪

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

背景位置(position)

語法：

background-position : length || length
?
background-position : position || position

參數：

length : 　百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位

說明：

設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為：(0% 0%)。

如果只指定了一個值，該值將用于橫坐標。縱坐標將默認為50%。第二個值將用于縱坐標。

注意：

position 后面是x坐標和y坐標。可以使用方位名詞或者精確單位。
如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標后面。比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標。

實際工作用的最多的，就是背景圖片居中對齊了。

背景附著

語法：

background-attachment : scroll | fixed

參數：

scroll : 　背景圖像是隨對象內容滾動

fixed : 　背景圖像固定

說明：

設置或檢索背景圖像是隨對象內容滾動還是固定的。

背景簡寫

background屬性的值的書寫順序官方并沒有強制標準的。為了可讀性，建議大家如下寫：

background:背景顏色背景圖片地址背景平鋪背景滾動背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的寫法語法格式是:

background: rgba(0,0,0,0.3);

最后一個參數是alpha 透明度取值范圍 0~1之間

注意：背景半透明是指盒子背景半透明，盒子里面的內容不收影響。

導航欄案例

使用技巧：在一行內的盒子內，我們設定行高等于盒子的高度，就可以使文字垂直居中。

<!DOCTYPE html>

<html>

<head>

    <title>html5添加音樂</title>

    <meta charset="utf-8">

<!--embed標簽寫在<head>里面的title標簽下-->
   

<embed src="C:\Users\Administrator\Desktop\告白氣球.mp3" hidden="flase" autostart="true" loop="true">


<!-- 說明：

1、src：文件路徑。

2、hidden="true"表示隱藏音樂播放按鈕，相反使用hidden="false"表示開啟音樂播放按鈕。

3、autostart="true" 表示是打開網頁加載完后自動播放。

4、loop="true"表示 循環播放 如僅想播放一次則為：loop="false" -->

</head>

<body>

<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"

            src="C:\Users\Administrator\Desktop\告白氣球.mp3">       

</audio>

<!-- 說明：

1、autoplay="autoplay"，則背景音樂將在音網頁打開后就自動馬上播放。

2、controls="controls"，則為了在頁面內顯示顯示控件，如播放按鈕。

3、"loop="loop"，則是為了使背景音樂重復播放。

4、preload="auto"，則音頻在頁面加載的同時進行加載，并預備播放。

5、src=""，即是在""內加入背景音樂的保存路徑，如：src=""。

注：若是想播放按鈕隱藏，則使用以下語句：

直接使用css 的display控制audio標簽的顯示： -->

<style type="text/css">

 audio{

         display: none;

     }

</style>

</body>

</html>

在線咨詢

上一篇：僅需 5 步，用 JavaScript 直接通過前端發送電子郵件
下一篇：HTML高亮關鍵字的完美解決方案

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商