css3新特性的使用示例

這篇文章給大家分享的是有關(guān)css3新特性的使用示例的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

10多年專注成都網(wǎng)站制作，成都定制網(wǎng)頁設(shè)計(jì)，個(gè)人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識(shí)、方案，網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于成都定制網(wǎng)頁設(shè)計(jì),高端網(wǎng)頁制作,對(duì)垃圾桶等多個(gè)行業(yè)，擁有多年的營(yíng)銷推廣經(jīng)驗(yàn)。

什么是CSS?

層疊樣式表（CSS）是一種向Web文檔添加樣式（例如，字體，顏色，間距）的簡(jiǎn)單機(jī)制。

什么是CSS3?

CSS3是CSS語言的最新發(fā)展，旨在擴(kuò)展CSS2.1。它帶來了許多新功能和附加功能，如圓角，陰影，漸變，過渡或動(dòng)畫，以及多列，靈活的框或網(wǎng)格布局等新布局。

現(xiàn)在讓我們看看有哪些新東西？

CSS3選擇器

選擇器是CSS的核心。最初，CSS允許按類型，類和/或ID匹配元素。CSS2.1添加了偽元素，偽類和組合子。使用CSS3，我們可以使用各種選擇器來定位頁面上的幾乎任何元素。

CSS2引入了幾個(gè)屬性選擇器。這些允許基于其屬性匹配元素。 CSS3擴(kuò)展了那些屬性選擇器。在CSS3中添加了三個(gè)屬性選擇器;它們?cè)试S子串選擇。

  • 匹配屬性attr以值val開頭的任何元素E.換句話說，val匹配屬性值的開頭。

E[attr^=val]
eg.          a[href^='http://sales.']{color: teal;}

  • 匹配屬性attr以val結(jié)尾的任何元素E.換句話說，val匹配屬性值的結(jié)尾。

E[attr$=val]
eg.          a[href$='.jsp']{color: purple;}

  • 匹配屬性attr在屬性中的任何位置匹配val的任何元素E.它類似于E [attr~ = val]，在這里val可以是單詞也可以是單詞的一部分。

E[attr*=val]  
eg.         img[src*='artwork']{
                    border-color: #C3B087 #FFF #FFF #C3B087;
                               }

偽類元素

您可能已經(jīng)熟悉了一些用戶交互偽類，即：link，：visited，：hover，：active和：focus。

在CSS3中添加了一些偽類選擇器。一個(gè)是：根選擇器，它允許設(shè)計(jì)者指向文檔的根元素。在HTML中，它將是<html>。因?yàn)椋簉oot是通用的，它允許設(shè)計(jì)者選擇XML文檔的根元素，而不必知道它的名稱。要在文檔中需要時(shí)允許滾動(dòng)條，此規(guī)則將起作用。

:root{overflow:auto;}

作為：first-child選擇器的補(bǔ)充，添加了：last-child。有了它，可以選擇父元素命名的最后一個(gè)元素。

p.article > p:last-child{font-style: italic;}

添加了一個(gè)新的用戶交互偽類選擇器：target目標(biāo)選擇器。為了在用戶點(diǎn)擊同一頁面鏈接時(shí)將用戶的注意力吸引到一段文本，像下面第一行這樣的規(guī)則可以很好地工作;鏈接看起來像第二行，突出顯示的跨度就像第三行。

span.notice:target{font-size: 2em; font-style: bold;}
<a href='#section2'>Section 2</a>
<p id='section2'>...</p>

已創(chuàng)建用于選擇未通過測(cè)試的指定元素的功能表示法。否定偽類選擇器：不能與幾乎任何已實(shí)現(xiàn)的其他選擇器耦合。例如，要在沒有指定邊框的圖像周圍放置邊框，請(qǐng)使用這樣的規(guī)則。

img:not([border]){border: 1;}

CSS3顏色

CSS3帶來了對(duì)一些描述顏色的新方法的支持。在CSS3之前，我們幾乎總是使用十六進(jìn)制格式（#FFF或#FFFFFF for white）聲明顏色。也可以使用rgb（）表示法聲明顏色，提供整數(shù)（0-255）或百分比。

顏色關(guān)鍵字列表已在CSS3顏色模塊中進(jìn)行了擴(kuò)展，包括147種額外的關(guān)鍵字顏色（通常得到很好的支持），CSS3還為我們提供了許多其他選項(xiàng)：HSL，HSLA和RGBA。這些新顏色類型最顯著的變化是能夠聲明半透明顏色。

RGBA

RGBA的工作方式與RGB類似，只是它添加了第四個(gè)值：alpha，不透明度級(jí)別或alpha透明度級(jí)別。前三個(gè)值仍然代表紅色，綠色和藍(lán)色。對(duì)于alpha值，1表示完全不透明，0表示完全透明，0.5表示50％不透明。您可以使用介于0和1之間的任意數(shù)字。

background: rgba(0,0,0,.5) //在這里0.5的0可以省略

HSL和HSLA

HSL代表色調(diào)，飽和度和亮度。與RGB不同，您需要通過一致地更改所有三個(gè)顏色值來操縱顏色的飽和度或亮度，使用HSL，您可以調(diào)整飽和度或亮度，同時(shí)保持相同的基色調(diào)。 HSL的語法包括色調(diào)的整數(shù)值，以及飽和度和亮度的百分比值。

hsl（）聲明接受三個(gè)值：

  • 0到359度的色調(diào)。一些例子是：0 =紅色，60 =黃色，120 =綠色，180 =青色，240 =藍(lán)色，300 =品紅色。

  • 飽和度為百分比，100％為常態(tài)。 100％的飽和度將是完整的色調(diào)，飽和度0將給你一個(gè)灰色陰影。

  • 基本上導(dǎo)致色調(diào)值被忽略。

  • 飽和度為百分比，100％為常態(tài)。 100％的飽和度將是完整的色調(diào)，飽和度0將給你一個(gè)灰色陰影》

  • 基本上導(dǎo)致色調(diào)值被忽略。

  • 輕度的百分比，50％是常態(tài)。亮度為100％為白色，50％為實(shí)際色調(diào)，0％為黑色。

    hsla()中的a也與rgba()中的函數(shù)相同

    Opacity

    除了使用HSLA和RGBA顏色指定透明度（以及很快，八位十六進(jìn)制值）之外，CSS3還為我們提供了不透明度屬性。 opacity設(shè)置聲明它的元素的不透明度，類似于alpha。

    我們來看一個(gè)例子:

 div.halfopaque {
    background-color: rgb(0, 0, 0);
    opacity: 0.5;
    color: #000000;
}
div.halfalpha {
    background-color: rgba(0, 0, 0, 0.5);
    color: #000000;
}

盡管alpha和不透明度符號(hào)的使用看似相似，但是當(dāng)你看它時(shí)，它們的功能有一個(gè)關(guān)鍵的區(qū)別。

雖然不透明度為元素及其所有子元素設(shè)置不透明度值，但半透明RGBA或HSLA顏色對(duì)元素的其他CSS屬性或后代沒有影響。

圓角：邊界半徑

border-radius屬性允許您創(chuàng)建圓角而無需圖像或其他標(biāo)記。要在我們的框中添加圓角，我們只需添加即可

border-radius: 25px;

border-radius屬性實(shí)際上是一種速記。對(duì)于我們的“a”元素，角落大小相同且對(duì)稱。如果我們想要不同大小的角落，我們可以聲明最多四個(gè)唯一值

border-radius: 5px 10px 15px 20px;

陰影

CSS3提供了使用box-shadow屬性向元素添加陰影的功能。此屬性允許您指定元素上一個(gè)或多個(gè)內(nèi)部和/或外部陰影的顏色，高度，寬度，模糊和偏移。

box-shadow: 2px 5px 0 0 rgba(72,72,72,1);

文字陰影

text-shadow為文本節(jié)點(diǎn)中的單個(gè)字符添加陰影。在CSS 3之前，可以通過使用圖像或復(fù)制文本元素然后定位它來完成。

text-shadow: topOffset leftOffset blurRadius color;

線性漸變

W3C添加了使用CSS3生成線性漸變的語法。

Syntax: background: linear-gradient(direction, color-stop1, color-stop2, ...);
e.g.   #grad {
  background: linear-gradient(to right, red , yellow);
}

css3新特性的使用示例
你甚至可以用度數(shù)指定方向，例如在上面的例子中，60deg而不是右邊。

徑向漸變

徑向漸變是圓形或橢圓形漸變。顏色不是沿著直線前進(jìn)，而是從所有方向的起點(diǎn)混合出來。

Syntax : background: radial-gradient(shape size at position, start-color, ..., last-color);
e.g.     #grad {
  background: radial-gradient(red, yellow, green);
}//Default       
         #grad {
  background: radial-gradient(circle, red, yellow, green);
}//Circle

css3新特性的使用示例

背景

在CSS3中，不需要為每個(gè)背景圖像包含一個(gè)元素;它使我們能夠向任何元素添加多個(gè)背景圖像，甚至偽元素。

background-image:
url(firstImage.jpg),
url(secondImage.gif),
url(thirdImage.png);

感謝各位的閱讀！關(guān)于“css3新特性的使用示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站標(biāo)題：css3新特性的使用示例
鏈接URL：http://muchs.cn/article34/jcjjpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、云服務(wù)器、小程序開發(fā)、品牌網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司