CSS 寫一個商城卡券
阿新 • • 發佈:2019-08-05
還在為上面這樣格式各樣的商城卡券的樣式而發愁?CSS 不熟,canvas 太難,怎麼辦?
我們來準備一下基礎知識
radial-gradient
background: radial-gradient(shape size at position, start-color, ..., last-color);
值 | 描述 |
---|---|
shape | 確定圓的型別: |
ellipse (預設): 指定橢圓形的徑向漸變。 circle :指定圓形的徑向漸變 | |
size | 定義漸變的大小 |
position | 定義漸變的位置 |
這樣,我們能很容易寫出一個居中的圓形背景圖
.center-circle { width: 100px; height: 100px; background: radial-gradient(circle at 50px 50px, transparent 10px, #00adb5 0); } web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路
linear-gradient
background: linear-gradient(direction, color-stop1, color-stop2, ...);
值 | 描述 |
---|---|
direction | 用角度值指定漸變的方向(或角度) |
color-stop1, color-stop2,... | 用於指定漸變的起止顏色 |
我們不需要知道具體的漸變過程,只要寫一個簡單的,寫一個使用漸變屬性而不漸變背景圖即可:
.linear-gradient { width: 100px; height: 100px; background: linear-gradient(to right, #00adb5, #00adb5); }
background
background
是可以設定多個圖片的,遵循background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
使用,
隔開即可。
開始組合基礎知識
寫一個最簡單的
只要把上述中心圓示例的圓形位置定位在左側即可
.left-circle{ width: 100px; height: 100px; position: relative; background: radial-gradient(circle at 0 50px, transparent 10px, #00adb5 0) top left/100px 100% no-repeat; }
進一步學習
你可還記得 background
是有 repeat
屬性嗎?也就是說我們只要設定一部分樣式,再使用 repeat
即可,看下圖片,這不就是一個不漸變的 linear-gradient
和 radial-gradient
的組合嗎,再借助偽類,我們即可寫出來了。
.hollow-circles {
width: 300px;
height: 100px;
position: relative;
background: #00adb5;
margin-bottom: 10px;
}
.hollow-circles::after {
content: '';
position: absolute;
height: 5px;
width:100%;
left: 0;
bottom: -5px;
background-image: linear-gradient(to right, #00adb5 5px, transparent 5px, transparent),
radial-gradient(10px circle at 10px 5px, transparent 5px, #00adb5 5px);
background-size: 15px 5px;
}
複雜一點
看見很簡單,不就是剛才那個圓再畫一個嗎,但是要考慮到兩側的顏色是不同的,所以我們需要畫四個背景圖才行,將每個圓定位在方形的各個角落,然後組合在一起即可。
.two-circles {
width: 300px;
height: 100px;
background: radial-gradient(circle at right top, transparent 10px, #00adb5 0) top left / 60px 51% no-repeat,
radial-gradient(circle at right bottom, transparent 10px, #00adb5 0) bottom left /60px 51% no-repeat,
radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top right /240px 51% no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) bottom right /240px 51% no-repeat;
}
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路
寫在最後
當我們看到一個新東西時,不要抵觸,試著去分析一下,有可能他只是我們以前所學的變體而已,僅僅是對我們已有知識的重新組合和適當改造,當我們搞定了的時候,也許才發現,這也不過如此,然而倘若當初懷著抵觸拒絕,卻只能是一