91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS3選擇器與邊框樣式

發布時間:2020-07-21 13:15:22 來源:網絡 閱讀:709 作者:ZeroOne01 欄目:web開發


CSS3選擇器

選擇器中的屬性:

之前介紹過[ ]里可以定義屬性或屬性值,之后的標簽中只要含有該定義的屬性或屬性值就會擁有該樣式。所以繼續介紹剩下的幾種聲明方式。

  1. [attribute^=value],例如:[title^=”abc”],選擇只要是title屬性值以abc開頭的每個標簽,就賦予這個樣式,示例:

CSS3選擇器與邊框樣式

運行結果:

CSS3選擇器與邊框樣式


CSS3選擇器與邊框樣式

  1. [attribute$=value],例如:[title$=”123”],選擇只要是title屬性值以123結尾的每個標簽,就賦予這個樣式,示例:


運行結果:

CSS3選擇器與邊框樣式


  1. [attribute*=value],例如:[title*=”abc”],選擇只要是title屬性值包含abc字符串的每個標簽,就賦予這個樣式,示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式


思維導圖:

CSS3選擇器與邊框樣式



超級鏈接的狀態樣式:

超級鏈接有四個狀態的樣式:1.從來沒有被訪問過的超級鏈接,2.已經被訪問過的超級鏈接,3.鼠標移動到超級鏈接時的狀態,4.鼠標點擊超級鏈接時的狀態。

每一個狀態都可以設置不同的樣式:

a:link 設置從來沒有被訪問過的超級鏈接樣式

a:visited 設置已經被訪問過的超級鏈接樣式

a:hover 設置鼠標移動到超級鏈接時的樣式

a:active 設置鼠標點擊超級鏈接時的樣式


代碼示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式

CSS3選擇器與邊框樣式

CSS3選擇器與邊框樣式

CSS3選擇器與邊框樣式


思維導圖:

CSS3選擇器與邊框樣式



焦點獲得時改變樣式:

input:focus 可以定義在組件獲得焦點時改變樣式


代碼示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式



設置子標簽樣式:

:last-child 設置父標簽最后一個子標簽的樣式,例如:div p:last-child,設置div標簽里最后一個p標簽的樣式

:first-child 則是相反,設置父標簽最第一個子標簽的樣式,例如:div p:first-child,設置div標簽里第一個p標簽的樣式

代碼示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式



:nth-of-type(n),設置父標簽從第一個開始數的第n個子標簽的樣式,例如:div p:nth-of-type(2),就是設置div標簽里第二p標簽的樣式

:nth-last-of-type(n),設置父標簽從倒數第一個開始數的第n個子標簽的樣式,例如:div p:nth-of-type(1),就是設置div標簽里倒數第一個p標簽的樣式


代碼示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式



利用:nth-of-type(n)可以做到隔行變色的效果,應用在表格上代碼示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式




邊框樣式

border屬性可以用于控制標簽的邊框樣式,邊框的尺寸使用px為單位。

常用的邊框的線條樣式:

solid 實線

none 無邊框線

double 雙線

dashed 虛線

代碼示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式

思維導圖:

CSS3選擇器與邊框樣式


邊框可以根據上下左右來控制:

border-top 上邊框

border-bottom 下邊框

border-left 左邊框

border-right 右邊框

代碼示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式


思維導圖:

CSS3選擇器與邊框樣式



邊框還可以調整四角的弧度:

border-radius 調整邊框的弧度,單位可以用px和%

把照片的邊框調整成圓形示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式


調整文本框弧度示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式



還可以針對四角來調整弧度:

border-bottom-left-radius 調整左下角的弧度

border-bottom-right-radius 調整右下角的弧度

border-top-right-radius 調整右上角的弧度

border-top-left-radius 調整右下角的弧度


代碼示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式



調整組件的陰影:

box-shadow可以調整組件的陰影面積,也可以設置陰影的顏色:

代碼示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式



前兩個數值設置為0,就能實現類似光暈的效果:

代碼示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式



圖片邊框:border-image

使用此屬性可以將圖片設置到邊框上,末尾可以使用round或stretch來定義圖片圍繞或是拉伸效果。

代碼示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式



代碼示例:

CSS3選擇器與邊框樣式


運行結果:

CSS3選擇器與邊框樣式








向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

平度市| 银川市| 徐汇区| 大荔县| 舞阳县| 玛多县| 南川市| 邹平县| 清苑县| 锦屏县| 西平县| 杭锦后旗| 嘉义市| 增城市| 万全县| 萨嘎县| 通山县| 囊谦县| 衡阳市| 理塘县| 凌源市| 大渡口区| 廊坊市| 上高县| 潮州市| 改则县| 河东区| 镇江市| 兖州市| 长治县| 柯坪县| 治多县| 双流县| 南召县| 丹阳市| 临潭县| 澎湖县| 石河子市| 特克斯县| 南华县| 漳浦县|