CSS-backgroound和radial-giadient的常見用法
阿新 • • 發佈：2020-12-13
- 前言
這裡主要介紹下css中background和radial-giadient徑向漸變的使用，工作中用到的地方可能也不太多，但是每次用到了都需要查閱官網，查資料就比較麻煩，這裡記錄一下我自己整理的常見用法，方便日後使用吧！這裡省去了一些特別特別基礎的使用語法。
- 目錄
- 自己根據兩個屬性實現的一些簡單的效果
- background的語法使用
- radial-giadient的語法使用
- 正文
- 根據background和radial-gradient實現的一些簡單效果
2.background的語法使用
background屬性
-
-
- background-color : 定義元素的背景顏色
-
- background-color 設定的只是背景顏色， background 設定的是整個背景
- 當元素本身設定了background-img 屬性時，如果設定了background-color,圖片不會被覆蓋，background-color會在image底層，而過設定的是background，那麼圖片會被覆蓋掉
-
- background-image：定義圖片為背景，多張圖片時需要寫多個url
-
- 當設定了visibility:hidden與display:none對background-image的影響 background-image對應的是一張靜態資源圖片，當頁面渲染前會請求這張圖片的資源來進行載入渲染 visibility:hidden 元素仍然再dom樹中，只是不顯示而已，display:none,元素不存在與dom樹中 當元素visibility：hidden時，這張圖片資源仍然會請求，但是顯示不出來，當設定了display:none這張圖片不會請求，也不會顯示 一種特殊場景 如果也i按出現了滾動條，那麼滾動條下面（即檢視之外）的background-image靜態資源回不回請求呢，答案是會的，只要元素存在與dom樹上，不論顯示還是隱藏，其一欄的background-image資源都將會請求回來
-
- background-position：設定圖片的起始位置，定義的background-image在容器中的位置，對background-color無效
- background-repeat：設定背景圖片是否以及如何平鋪，值針對background-image的平鋪，對background-color無效
- background-size：設定背景圖片的尺寸，有四種植，如果要設定size的值，需要緊跟在position後面並且用"/"隔開
-
- length：設定【怕【影象的高寬，圖片會根據高寬發生扭曲，通常使用的時候只需要設定一個值，以免圖片發生扭曲
- percentage：以父元素的百分比設定高寬，同上
- cover 把背景圖片擴充套件到足夠大，以使背景圖片覆蓋整個背景區域，影象不會發生扭曲，內容區域全部有背景圖片，但是可能背景圖片不全，只是其中的一部分
- contain ：設定背景圖片擴充套件到最大尺寸，使得其高寬全適應內容區域，圖片不會發生扭曲，但是肯能一部分割槽域沒有背景圖
-
- background-origin：設定背景圖片的背景區域
-
- border-box：預設值，背景繪製在邊框的方框內
- padding-box：背景繪製在襯距方框內
- content-box：背景繪製在內容方框內
-
- background-clip：規定背景的繪製區域
-
- border-box：預設值，背景繪製在邊框的方框內
- padding-box：背景繪製在襯距方框內
- content-box：背景繪製在內容方框內
- background-attachment：設定背景影象是否固定或者隨著頁面的滾動而滾動，定義background-image是否跟隨容器的滾動而滾動，對background-color無效
-
- scroll:預設值，背景影象會隨著頁面其餘部分的滾動而滾動
- fixed:當頁面的其餘部分滾動時，背景影象不會移動
- inherit:規定應該從父元素繼承background-attachment屬性的設定
-
- background-color : 定義元素的背景顏色
-
實現上面第一個效果的寫法：
補充一個transparent常見用法
background :transparent代表背景透明 使用場景：如果一個元素在另一個元素之上，而你想顯示下面的元素，這時你就需要把上面的元素的bangckground設定為transparent，這就像常見的你點選儲存二維碼一樣，有時候其實是兩張圖片，你看到的是下面的一張圖片，點選儲存的是上面的二維碼的圖片。
3.radial-giadient的語法使用
- radial-gradient函式用於徑向漸變建立影象
- 語法：background: radial-gradient(shape size at position, start-color, …, last-color);
- 三個引數
<div class="mydiv">
<div class="innerdiv">
<div>123456789</div>
<div>123456789</div>
</div>
</div>
.mydiv{
height: 220px;
width: 220px;
border: 1px solid pink;
padding: 10px;
margin: 0 auto;
background: radial-gradient(transparent 10px, powderblue 10px);
background-size: 22px 22px;
background-position: 10px 10px;
box-shadow: 0 4px 16px #333333;
}
.innerdiv{
height: 220px;
background-color: powderblue;
}
常見的用法二：效果圖上圖3
<div class="wrap">
500元
</div>
.wrap{
position: relative;
margin: 100px auto;
height: 160px;
width: 400px;
background-image: radial-gradient( circle at 0.5px 8px ,transparent 6px,#ff9e6d 6px,#ff9e6d),radial-gradient( circle at 199.5px 8px ,transparent 6px,#ff9e6d 6px);
background-size: 200px 18px;
background-position: 0 0 , 200px 0;
background-repeat: repeat-y;
font-size: 60px;
color: #fff;
font-weight: bold;
line-height: 160px;
padding-left: 40px;
box-sizing: border-box;
cursor: pointer;
}
.wrap::before {
position: absolute;
content: "";
left: 240px;
top: 0;
bottom: 0;
width: 0;
border-left: 1px dashed #fff;
}
.wrap::after {
position: absolute;
content: "立即領取";
font-size: 26px;
width: 70px;
top: 50%;
right: 2%;
transform: translate(-50%, -50%);
line-height: 40px;
letter-spacing: 5px;
}
常見的用法三：效果圖上圖4
<div class="color-text">
hello world!
</div>
.color-text{
width: 700px;
font-size:100px;
font-weight: 600;
background:-webkit-linear-gradient(left, #FB1616, #F3167C 10%,
#5A28F3 20%,#2099EF 30%, #096B7B 40%,#5EE626 50%, #B7D416 60%,
#E0AC1A 70%, #EF6F14 80%,#B90F4E 90% );
color:transparent;
/* 以區塊內的文字作為裁剪區域向外裁剪，文字的背景即為區塊的背景，文字之外的區域都將被裁剪掉。 */
-webkit-background-clip: text;
margin: 100px auto;
}
還有很多炫酷的用法，比如電子回單裡面邊框條紋，信封的手撕特效都是由css完成的，歡迎各位大佬提出寶貴的意見。
&n