雷速体育比分直播网:

您的位置:雷速体育答题测试答案 > div+css > css3新增屬性有哪些

css3新增屬性有哪些

時間:2018-01-31 21:56:54  來源:免費模板網 作者:風雪 閱讀次數 tagscss3

相對于之前的css2,我們在css3上會發現一些經常用到的功能,如偽類的使用,還有選擇器的使用

一、選擇器

1、屬性選擇器:

  • p[index]{background:red}                           //只使用屬性名,但沒有確定任何屬性值

  • p[index=1]{background:red}                       //指定屬性名,并指定了該屬性的屬性值

  • p[index~=pre]{background:red}                  //指定屬性名,并且具有屬性值,此屬性值是一個詞列表,并且以空格隔開,其中詞列表中包含了一個value詞

  • p[index^=p]{background:red}                         //指定了屬性名,并且有屬性值,屬性值是以value開頭的

  • p[index$=M]{background:red}                         //指定了屬性名,并且有屬性值,而且屬性值是以value結束的

  • p[index*=d]{background:red}                         //指定了屬性名,并且有屬性值,而且屬值中包含了value

  • p[index|=d]{background:red}                      //指定了屬性名,并且屬性值是value或者以“value-”開頭的值(比如說zh-cn)

2、結構性偽類

  • E:nth-child(n) 表示E父元素中的第n個字節點

p:nth-child(odd){background:red}/*匹配奇數行*/

p:nth-child(even){background:red}/*匹配偶數行*/

p:nth-child(2n){background:red}

  • E:nth-last-child(n) 表示E父元素中的第n個字節點,從后向前計算

  • E:nth-of-type(n) 表示E父元素中的第n個字節點,且類型為E

  • E:nth-last-of-type(n)表示E父元素中的第n個字節點,且類型為E,從后向前計算

  • E:empty 表示E元素中沒有子節點。注意:子節點包含文本節點

  • E:first-child 表示E元素中的第一個子節點

  • E:last-child 表示E元素中的最后一個子節點

  • E:first-of-type 表示E父元素中的第一個子節點且節點類型是E的

  • E:last-of-type 表示E父元素中的最后一個子節點且節點類型是E的

  • E:only-child表示E元素中只有一個子節點。注意:子節點不包含文本節點

  • E:only-of-type 表示E的父元素中只有一個子節點,且這個唯一的子節點的類型必須是E。注意:子節點不包含文本節點

3、偽類

  • E:target 表示當前的URL片段的元素類型,這個元素必須是E

  • E:disabled 表示不可點擊的表單控件 E:enabled 表示可點擊的表單控件

  • E:checked 表示已選中的checkbox或radio

 

  • E:first-line 表示E元素中的第一行

  • E:first-letter 表示E元素中的第一個字符

  • E::selection表示E元素在用戶選中文字時

  • E::before 生成內容在E元素前

  • E::after 生成內容在E元素后

  • Content 屬性

  • E:not(s) 表示E元素不被匹配

  • E~F表示E元素毗鄰的F元素

二、顏色模式

css3新增屬性有哪些

css3新增屬性有哪些

 三、文字陰影與描邊

1、文字陰影

css3新增屬性有哪些

光暈效果:color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

css3新增屬性有哪些

層疊效果:color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;

css3新增屬性有哪些

浮雕效果:color:white; font-size:100px; font-weight:bold; text-shadow:2px 2px 4px #000;

css3新增屬性有哪些

2、文字描邊:只有webkit內核支持

 -webkit-text-stroke:寬度 顏色

四、新增文本功能(全兼容)

1、direction 定義文字排列方式(全兼容)

  • rtl 從右向左排列

  • ltr 從右向左排列

  • 注意要配合unicode-bidi:bidi-override; 一塊使用

2、text-overflow 定義省略文本的處理方式

  • clip 無省略號

  • Ellipsis 省略號 (注意配合overflow:hidden和white-space:nowrap一塊使用)

五、自定義字體


本文地址://www.384142.live/bjrm/2018/0131/2952.html

猜你喜歡
欄目推薦
模板推薦

Copyright:雷速体育答题测试答案 www.384142.live 免費模板網 All Rights Reserved 雷速体育答题测试答案   遼公網安備 21010602000376號  遼公網安備:42900402000182號

免責聲明:本站部分資源來自互聯網收集,版權歸原創者所有,如果侵犯了你的權益,我們會及時刪除侵權內容,聯系QQ:1615187561 謝謝合作!

{ganrao}