夜色网_黄免费视频_国产一区二区欧美丝袜_秋葵app下载秋葵官网18岁黄网页版

先設計 后付費,服務更有保障

2024我們與您攜手共贏,為您的企業形象保駕護航!

在網頁設計過程中正確理解css圓角邊框及背景圖

在時使用CSS邊框圓角是很容易的事,但要設置邊框圓角的漸變效果就需要費些功夫了,需要正確理解幾個CSS屬性的含義,background-origin,background-clip,background-size這幾個是必須用到的,調整好性能的數值就可以靈活運用了。

想要實現CSS圓角漸變并匹配內容背景圖可以參考以下代碼:

<style>
div {
 width: 500px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*設置圓角*/
 border:50px solid transparent; /*設置邊框顏色透明,確保背景漸變色顯示*/
 background-origin:border-box; /*從邊框開始背景圖*/
 background-clip:padding-box,border-box; /*設置第一個背景和第二個背景的范圍*/
 background-size:cover;
 /*由于背景圖像不能設置純色,所以可以使用下面的方式設置純色*/
 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">邊框漸變色從內邊框到邊框,背景圖像單獨設置不重復。</span>
</div>

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

border-box 從邊框開始;
padding-box(默認) 從內邊距開始;
content-box 從內容開始。

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

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

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

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

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

contain 將圖像擴大至適應最短的邊,剩余部分默認重復圖像
cover 將圖像擴大至適應最長的邊,圖像可能顯示不完整
length 兩個值依次設置圖像寬和高,未設置則為auto
percentage 兩個百分比依次設置圖像寬和高,未設置則為auto
auto 默認設置


我漢獅網絡提供網站建設、APP軟件開發、軟件開發、小程序開發、網站網絡營銷等一站式服務,歡迎企業咨詢
免費咨詢:18838171308

先設計 后付費,服務更有保障

2024我們與您攜手共贏,為您的企業形象保駕護航!

在線客服
聯系方式

24h咨詢電話

18838171308

微信二維碼
微信