在網(wǎng)頁設(shè)計過程中正確理解css圓角邊框及背景圖

建企業(yè)網(wǎng)站時使用CSS邊框圓角是很容易的事，但要設(shè)置邊框圓角的漸變效果就需要費(fèi)些功夫了，需要正確理解幾個CSS屬性的含義，background-origin,background-clip,background-size這幾個是必須用到的，調(diào)整好性能的數(shù)值就可以靈活運(yùn)用了。

想要實(shí)現(xiàn)CSS圓角漸變并匹配內(nèi)容背景圖可以參考以下代碼：

<style>
div {
 width: 500px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*設(shè)置圓角*/
 border:50px solid transparent; /*設(shè)置邊框顏色透明，確保背景漸變色顯示*/
 background-origin:border-box; /*從邊框開始背景圖*/
 background-clip:padding-box,border-box; /*設(shè)置第一個背景和第二個背景的范圍*/
 background-size:cover;
 /*由于背景圖像不能設(shè)置純色，所以可以使用下面的方式設(shè)置純色*/
 background-image:linear-gradient(#fff, #fff),linear-gradient(#FC0, #F30); 
}
.a1{display:block;height:280px;background-image:url(/images/school.jpg);
background-repeat:no-repeat;background-size:contain;}
</style>

<div>
<span class="a1">邊框漸變色從內(nèi)邊框到邊框，背景圖像單獨(dú)設(shè)置不重復(fù)。</span>
</div>

background-origin表示的是背景起始位置，其三個值如下，依次是

border-box 從邊框開始；
padding-box(默認(rèn)) 從內(nèi)邊距開始；
content-box 從內(nèi)容開始。

background-origin: border-box | padding-box(默認(rèn)) | content-box

background-clip表示的是背景填充位置，其四個值如下，依次是

border-box(默認(rèn)) 填充至邊框；
padding-box 填充至內(nèi)邊距；
content-box 填充之內(nèi)容；
text 作為字體前景色。

background-clip: border-box(默認(rèn)) | padding-box | content-box | text

background-size表示的是背景尺寸，其五個值如下，依次是

contain 將圖像擴(kuò)大至適應(yīng)最短的邊，剩余部分默認(rèn)重復(fù)圖像
cover 將圖像擴(kuò)大至適應(yīng)最長的邊，圖像可能顯示不完整
length 兩個值依次設(shè)置圖像寬和高，未設(shè)置則為auto
percentage 兩個百分比依次設(shè)置圖像寬和高，未設(shè)置則為auto
auto 默認(rèn)設(shè)置

次看到一個網(wǎng)站有這個效果，模仿了下。效果差不多；效果描述：網(wǎng)頁中的背景圖隨鼠標(biāo)移上去會發(fā)生某個方向的偏移

鼠標(biāo)靠瀏覽器右側(cè)移上圖片部分，背景圖會往左移動，靠左側(cè)移上圖片，則相反.

實(shí)現(xiàn)代碼：

js：

信ID：WEB_wysj(點(diǎn)擊關(guān)注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

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

● ● ●

1、半透明邊框

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

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

2、多重邊框

背景知識: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í)線邊框，會貼合元素的圓角

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

3、靈活的背景定位

示例：實(shí)現(xiàn)一個背景圖在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);

4、邊框內(nèi)圓角

兩個div很容易實(shí)現(xiàn)，那么一個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;

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

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

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

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

6、復(fù)雜的背景圖案

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

CSS3 圖案庫lea.verou.me/css3patterns

7、偽隨機(jī)背景

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

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

蟬原則：通過質(zhì)數(shù)來增加隨機(jī)真實(shí)性

蟬漸變圖案：條紋圖案把不同尺寸的漸變圖案疊加起來，并使用質(zhì)數(shù)來增加隨機(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%;

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

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

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

解決方案：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;}

案例四：邊框的裁切效果，用來模擬傳統(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)取騰訊高級講師網(wǎng)頁設(shè)計教程

點(diǎn)我領(lǐng)取

???

關(guān)注網(wǎng)頁設(shè)計自學(xué)平臺，99%的努力都在這里

▼無法識別二維碼可以點(diǎn)「閱讀原文」噢！

在線咨詢

上一篇：javascript實(shí)現(xiàn)單張或多張圖片持續(xù)無縫滾動
下一篇：在HTML頁面中嵌入其他頁面的方法-零基礎(chǔ)自學(xué)網(wǎng)頁制作

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商