整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
信ID：WEB_wysj(點(diǎn)擊關(guān)注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄
（頁(yè)底留言開(kāi)放，歡迎來(lái)吐槽）
● ● ●
難題：直接設(shè)置一個(gè)半透明的邊框不起作用。
解決方案：padding-box盒模型border:10px solid rgba(255,255,255,.5);background: white;background-clip: padding-box;
背景知識(shí):box-shadow 的基本用法
box-shadow: X軸偏移量 Y軸偏移量 [模糊半徑] [擴(kuò)展半徑] [陰影顏色] [投影方式];
解決方案一：
利用box-shadow的屬性擴(kuò)張半徑background:
yellowgreen;box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);
特點(diǎn)：box-shadow 方案只能模擬實(shí)線邊框，會(huì)貼合元素的圓角
解決方案二：outline 方案background: yellowgreen;border: 10px solid #655;outline: 5px solid deeppink;特點(diǎn)：實(shí)現(xiàn)的“邊框”不會(huì)貼合元素的圓角，可以實(shí)現(xiàn)虛線邊框
示例：實(shí)現(xiàn)一個(gè)背景圖在div右下角，距離右邊10px 下邊10px 如圖;
解決方案一：background-position擴(kuò)展方案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);兩個(gè)div很容易實(shí)現(xiàn)，那么一個(gè)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）
背景知識(shí)：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;
正確方案：做到無(wú)縫拼接(60度的條紋不好做)background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;
優(yōu)化方案：重復(fù)漸變做60度條紋background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);height:100%;
案例六：靈活的同色系斜向條紋
在大多數(shù)情況下，我們想要的條紋圖案并不是由差異極大的幾種顏色組成的，這些顏色往往屬于同一色系。
失敗方案：沒(méi)有任何瀏覽器支持下面這個(gè)特性background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);正確方案：不再為每種條紋單獨(dú)指定顏色，而是把最深的顏色指定為背景色，同時(shí)把半透明白色的條紋疊加在背景色之上來(lái)得到淺色條紋background: #58a;background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);
背景知識(shí)：CSS 漸變，“條紋背景”
CSS3 圖案庫(kù)lea.verou.me/css3patterns
背景知識(shí)：CSS 漸變，“條紋背景”，“復(fù)雜的背景圖案”
大自然不會(huì)以“無(wú)縫”貼片的方式重復(fù)自己......
蟬原則：通過(guò)質(zhì)數(shù)來(lái)增加隨機(jī)真實(shí)性
蟬漸變圖案：條紋圖案把不同尺寸的漸變圖案疊加起來(lái)，并使用質(zhì)數(shù)來(lái)增加隨機(jī)的真實(shí)感
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%;
背景知識(shí)：CSS 漸變，基本的 border-image，“條紋背景”，基本的 CSS 動(dòng)畫案例一：一個(gè)元素有一圈裝飾性的邊框，基本上就是一張圖片被裁剪進(jìn)了邊框所在的方環(huán)區(qū)域。不僅如此，我們還希望這個(gè)元素的尺寸在擴(kuò)大或縮小時(shí)，這幅圖片都可以自動(dòng)延伸并覆蓋完整的邊框區(qū)域。
最簡(jiǎn)單的辦法是使用兩個(gè)HTML 元素：一個(gè)元素用來(lái)把我們的石雕圖片設(shè)為背景，另一個(gè)元素用來(lái)存放內(nèi)容，并設(shè)置純白背景，然后覆蓋在前者之上。問(wèn)題來(lái)了：如果只用一個(gè)元素，我們能做到這個(gè)效果嗎？
解決方案：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;}案例四：邊框的裁切效果，用來(lái)模擬傳統(tǒng)的腳注
border-top: .2em solid transparent;border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);padding-top: 1em;
干貨！免費(fèi)領(lǐng)取騰訊高級(jí)講師網(wǎng)頁(yè)設(shè)計(jì)教程
點(diǎn)我領(lǐng)取
???
關(guān)注網(wǎng)頁(yè)設(shè)計(jì)自學(xué)平臺(tái)，99%的努力都在這里
▼無(wú)法識(shí)別二維碼可以點(diǎn)「閱讀原文」噢！
SS 可以添加背景顏色和背景圖片，以及來(lái)進(jìn)行圖片設(shè)置。
背景圖片(image)
語(yǔ)法：
background-image : none | url (url)
參數(shù)：
none : 無(wú)背景圖（默認(rèn)的）
url : 使用絕對(duì)或相對(duì)地址指定背景圖像
background-image 屬性允許指定一個(gè)圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重復(fù)地話，圖片覆蓋不到地地方都會(huì)被背景色填充。 如果有背景圖片平鋪，則會(huì)覆蓋背景顏色。
小技巧： 我們提倡 背景圖片后面的地址，url不要加引號(hào)。
背景平鋪（repeat）
語(yǔ)法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
參數(shù)：
repeat : 背景圖像在縱向和橫向上平鋪（默認(rèn)的）
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素。
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素。
背景位置(position)
語(yǔ)法：
background-position : length || length ? background-position : position || position
參數(shù)：
length : 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。請(qǐng)參閱長(zhǎng)度單位
position : top | center | bottom | left | center | right
說(shuō)明：
設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定background-image屬性。默認(rèn)值為：(0% 0%)。
如果只指定了一個(gè)值，該值將用于橫坐標(biāo)。縱坐標(biāo)將默認(rèn)為50%。第二個(gè)值將用于縱坐標(biāo)。
注意：
實(shí)際工作用的最多的，就是背景圖片居中對(duì)齊了。
背景附著
語(yǔ)法：
background-attachment : scroll | fixed
參數(shù)：
scroll : 背景圖像是隨對(duì)象內(nèi)容滾動(dòng)
fixed : 背景圖像固定
說(shuō)明：
設(shè)置或檢索背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。
背景簡(jiǎn)寫
background屬性的值的書寫順序官方并沒(méi)有強(qiáng)制標(biāo)準(zhǔn)的。為了可讀性，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的寫法語(yǔ)法格式是:
background: rgba(0,0,0,0.3);
最后一個(gè)參數(shù)是alpha 透明度 取值范圍 0~1之間
注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不收影響。
導(dǎo)航欄案例
使用技巧：在一行內(nèi)的盒子內(nèi)，我們?cè)O(shè)定行高等于盒子的高度，就可以使文字垂直居中。
<!DOCTYPE html>
<html>
<head>
<title>html5添加音樂(lè)</title>
<meta charset="utf-8">
<!--embed標(biāo)簽寫在<head>里面的title標(biāo)簽下-->
<embed src="C:\Users\Administrator\Desktop\告白氣球.mp3" hidden="flase" autostart="true" loop="true">
<!-- 說(shuō)明：
1、src：文件路徑。
2、hidden="true"表示隱藏音樂(lè)播放按鈕，相反使用hidden="false"表示開(kāi)啟音樂(lè)播放按鈕。
3、autostart="true" 表示是打開(kāi)網(wǎng)頁(yè)加載完后自動(dòng)播放。
4、loop="true"表示 循環(huán)播放 如僅想播放一次則為：loop="false" -->
</head>
<body>
<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"
src="C:\Users\Administrator\Desktop\告白氣球.mp3">
</audio>
<!-- 說(shuō)明：
1、autoplay="autoplay"，則背景音樂(lè)將在音網(wǎng)頁(yè)打開(kāi)后就自動(dòng)馬上播放。
2、controls="controls"，則為了在頁(yè)面內(nèi)顯示顯示控件，如播放按鈕。
3、"loop="loop"，則是為了使背景音樂(lè)重復(fù)播放。
4、preload="auto"，則音頻在頁(yè)面加載的同時(shí)進(jìn)行加載，并預(yù)備播放。
5、src=""，即是在""內(nèi)加入背景音樂(lè)的保存路徑，如：src=""。
注：若是想播放按鈕隱藏，則使用以下語(yǔ)句：
直接使用css 的display控制audio標(biāo)簽的顯示： -->
<style type="text/css">
audio{
display: none;
}
</style>
</body>
</html>*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
