【CSS3學習筆記】16:邊框圖片效果
通過邊框背景這個新特性可以讓我們的邊框更加豐富。
相關屬性
①border-image-source 引入圖片背景地址
②border-image-slice 切割背景圖片
(通過設定四個值來知道四個角要顯示的尺寸,在這裡加入fill可以將內部填充)
③border-image-width 邊框圖片的寬度
(通過設定四個值來知道邊框四條邊的寬度。)
④border-image-repeat 邊框中邊的方案
(stretch拉伸(預設),repeat平鋪(超過則截斷),round平鋪(動態調整圖片大小),space平鋪(動態調整圖片間距)。)
⑤border-image-outset 邊框背景向外擴張的範圍
(為了剛好包含住background的範圍,它個值往往就是邊框每條邊的寬度。)
⑥border-image 前面五個屬性的簡寫
邊框應使用特製的圖片,能夠分成九宮格(不一定每格大小都一樣),如用ps製作了一張這樣的圖:
它的總大小是210px,每個格子為70px:
*測試程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS3邊框圖片效果</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div id="id1">
<span>加入圖片邊框</span>
</div>
<br>
<div id="id2">
<span>用百分比切割</span>
</div>
<br>
<div id="id3">
<span>向外擴張以包含住背景</span>
</div>
<br><br> <br><br><br><br><br>
<div id="id4">
<span>設定四個邊的方案</span>
</div>
<br>
<div id="id5">
<span>嘗試fill填充</span>
</div>
</html>
@charset "utf-8";
div span{
vertical-align: -200px;
}
#id1{
text-align: center;
width: 400px;
height :400px;
/*邊框的地址*/
border-image-source: url(lzh.png);
/*邊框影象寬度,四個邊都是70px*/
border-image-width: 70px;
/*邊框的切割,四邊都向內切割70(px),即每個角顯示70x70的小格,其它部分自動拉伸*/
border-image-slice: 70;
}
#id2{
text-align: center;
width: 400px;
height :400px;
border-image-source: url(lzh.png);
border-image-width: 70px;
border-image-slice: 33.4%;
}
#id3{
text-align: center;
margin: 0 auto;
width: 400px;
height :400px;
background-color: gray;
border-image-source: url(lzh.png);
border-image-width: 70px;
border-image-slice: 33.4%;
/*為了遮住背景顏色,向外擴張*/
border-image-outset: 70px;
}
#id4{
text-align: center;
width: 400px;
height :400px;
border-image-source: url(lzh.png);
border-image-width: 70px;
border-image-slice: 33.4%;
/*動態調整邊圖的大小以平鋪*/
border-image-repeat: round;
}
#id5{
text-align: center;
width: 400px;
height :400px;
border-image-source: url(lzh.png);
border-image-width: 70px;
/*既平鋪,又填充*/
border-image-slice: 33.4% fill;
border-image-repeat: round;
}
執行結果:
另外,利用邊框圖片(border-image),還可以做出按鈕的效果來。
相關推薦
【CSS3學習筆記】16:邊框圖片效果
通過邊框背景這個新特性可以讓我們的邊框更加豐富。 相關屬性 ①border-image-source 引入圖片背景地址 ②border-image-slice 切割背景圖片 (通過設定四個值來知
【python學習筆記】16:numpy陣列四則運算
*改變陣列元素值 >>> x=np.arange(8) >>> x array([0, 1, 2, 3, 4, 5, 6, 7]) >>> np
【CSS3學習筆記】13:瀏覽器相容性字首,新單位rem
本節學習了CSS3中的新屬性字首和新的長度單位rem。 字首 CSS3中一些新屬性推出時,還不太穩定,隨時可能被修改或者刪除,瀏覽器廠商為了使用它們就要採用自己的字首。 Chrome字首-webk
【JAVAWEB學習筆記】16
equal res http協議 操作 cnblogs 執行 開始 etc remove 會話技術Cookie&Session 學習目標 案例一、記錄用戶的上次訪問時間---cookie 案例二、實現驗證碼的校驗----session 一、會
【JAVAEE學習筆記】hibernate02:實體規則、對象狀態、緩存、事務、批量查詢和實現客戶列表顯示
使用 ins tro trace ges create 綁定 criteria 命名 一、hibernate中的實體規則 實體類創建的註意事項 1.持久化類提供無參數構造 2.成員變量私有,提供共有get/set方法訪問.需提供屬性 3.持久化類中的屬性,應盡量使用包
【JAVAEE學習筆記】hibernate03:多表操作,級聯練習:添加聯系人
row tac 默認值 rac user except pro intra com 一、一對多|多對一 1、關系表達 表中的表達 實體中的表達 orm元數據中表達 一對多 <!-- 集合,一對多關系,在配置文件中配置 -
【JAVAEE學習筆記】hibernate04:查詢種類、HQL、Criteria、查詢優化和練習為客戶列表增加查詢條件
沒有 arrays getpara tex response 寫法 sum exceptio 提高 一、查詢種類 1.oid查詢-get 2.對象屬性導航查詢 3.HQL 4.Criteria 5.原生SQL 二、查詢-HQL語法 //學習HQL語法 public
【K8S學習筆記】Part3:同一Pod中多個容器間使用共享卷進行通信
ash source net def exe tput stat policy container 本文將展示如何使用共享卷(Volume)來實現相同Pod中的兩個容器間通信。 註意:本文針對K8S的版本號為v1.9,其他版本可能會有少許不同。 0x00 準備工作 需要有一
【python學習筆記】37:認識Scrapy爬蟲,爬取滬深A股資訊
學習《Python3爬蟲、資料清洗與視覺化實戰》時自己的一些實踐。 認識Scrapy爬蟲 安裝 書上說在pip安裝會有問題,直接在Anaconda裡安裝。 建立Scrapy專案 PyCharm裡沒有直接的建立入口,在命令列建立(從Anaconda安裝後似乎自動就
【python學習筆記】36:抓取去哪兒網的旅遊產品資料
學習《Python3爬蟲、資料清洗與視覺化實戰》時自己的一些實踐。 書上這章開篇就說了儘量找JSON格式的資料,比較方便解析(在python裡直接轉換成字典),去哪兒網PC端返回的不是JSON資料,這裡抓取的是它的移動端的資料。 如果是就散落在網頁上,我覺得就像上篇學習的那
【python學習筆記】35:爬蟲基礎和相關產品API(和風天氣)使用例項
學習《Python3爬蟲、資料清洗與視覺化實戰》時自己的一些實踐。 在網站URL後面跟robots.txt一般就可以看到網站允許和禁止爬取的資源。 GET請求獲取響應內容 最基本的爬蟲。 import requests ''' 中國旅遊網 /www.cntour.
【python學習筆記】41:認識Pandas中的資料變形
學習《Python3爬蟲、資料清洗與視覺化實戰》時自己的一些實踐。 Pandas資料變形 關於stack()和unstack()見這裡和這裡。 import pandas as pd import numpy as np # 讀取杭州天氣檔案 df = pd.read
【python學習筆記】40:Pandas中DataFrame的分組/分割/合併
學習《Python3爬蟲、資料清洗與視覺化實戰》時自己的一些實踐。 DataFrame分組操作 注意分組後得到的就是Series物件了,而不再是DataFrame物件。 import pandas as pd # 還是讀取這份檔案 df = pd.read_csv("
【python學習筆記】39:認識SQLAlchemy,簡單操作Pandas中的DataFrame
學習《Python3爬蟲、資料清洗與視覺化實戰》時自己的一些實踐。 認識SQLAlchemy SQLAlchemy是Python的ORM工具,就像Java有Hibernate一樣,實現關係型資料庫中的記錄與Python自定義Class的物件的轉化,實現操作之間的對映。
【python學習筆記】38:使用Selenium抓取去哪兒網動態頁面
學習《Python3爬蟲、資料清洗與視覺化實戰》時自己的一些實踐。 在去哪兒網PC端自由行頁面,使用者需要輸入出發地和目的地,點選開始定製,然後就可以看到一系列相關的旅遊產品。在這個旅遊產品頁換頁不會改變URL,而是重新載入,這時頁碼沒有體現在URL中,這種動態頁面用傳統的爬蟲
【python學習筆記】45:認識Matplotlib和pyecharts資料視覺化
學習《Python3爬蟲、資料清洗與視覺化實戰》時自己的一些實踐。 Matplotlib資料視覺化 資料準備 import pandas as pd import matplotlib.pyplot as plt df = pd.read_csv("E:/Data/p
【python學習筆記】44:Series.apply()列資料批量處理,Series.str.extract()正則匹配
學習《Python3爬蟲、資料清洗與視覺化實戰》時自己的一些實踐。 Series.apply()列資料批量處理 先將該列取出,形成Series物件,再呼叫apply()方法傳入用於處理的函式,這個過程就像map()一樣。 import pandas as pd # 各
【python學習筆記】43:Pandas時序資料處理
學習《Python3爬蟲、資料清洗與視覺化實戰》時自己的一些實踐。 Python中時間的一些常用操作 import time # 從格林威治時間到現在,單位秒 print('系統時間戳:', time.time()) print('本地時間按格式轉成str:', tim
【python學習筆記】42:Pandas資料缺失值/異常值/重複值處理
學習《Python3爬蟲、資料清洗與視覺化實戰》時自己的一些實踐。 缺失值處理 Pandas資料物件中的缺失值表示為NaN。 import pandas as pd # 讀取杭州天氣檔案 df = pd.read_csv("E:/Data/practice/hz_we
【python學習筆記】46:隨機漫步,埃拉托色尼篩法,蒙特卡洛演算法,多項式迴歸
學習《Python與機器學習實戰》和《scikit-learn機器學習》時的一些實踐。 隨機漫步 import matplotlib.pyplot as plt import numpy as np ''' 一維隨機漫步 ''' # 博弈組數 n_person = 20