站建設CSS3中引入的新特性和功能。這些新特性極大地增加了web程序的表現能力,同時簡化了web UI的編程模型。下面成都網站建設蜀風科技將詳細介紹這些CSS3的新增特性。
1、強大的選擇器
網站建設CSS3的選擇器在CSS2.1的基礎上進行了增強,它允許設計師在標簽中指定特定的HTML元素而不必使用多余的類、ID或者JavaScript腳本。
如果希望設計出簡潔、輕量級的網頁標簽,希望結構與表現更好地分離,高級選擇器是非常有用的。它可以大大簡化我們的工作,提供編寫代碼效率,并讓我們很方便地制作出可維護性的頁面。
2、半透明度效果的實現
網站建設中RGBA不僅可以設定色彩,還能設定元素的透明度。無論是文本、背景還是邊框均可使用該屬性。該屬性的語法在其支持的瀏覽器中形同。
3、多欄布局
網站建設新的CSS3選擇器可以讓用戶不必使用多個DIV標簽就能實現多欄布局。瀏覽器解釋這個屬性并生成多欄,讓文本實現一個仿報紙的多欄結構。
4、多背景圖
CSS3允許背景屬性設置多個屬性值,這樣就可以在一個元素上添加多層背景圖片。
5、塊陰影和文字陰影
盡管box-shadow和text-shadow再CSS2中就已經存在,但是它們未被廣泛應用,它們將在CSS3中被廣泛采用。塊陰影和文字陰影可以不用圖片就能對HTML元素添加陰影,增加顯示的立體感增強設計的細節。塊陰影使用box-shadow屬性,文字陰影使用text-shadow屬性,該屬性目前在Safari和Chorme中可用。
6、圓角
網站建設CSS3新功能中最常用的一項就是圓角效果,Border-radius無須背景圖片就能給HTML元素添加圓角。不同于添加JavaScript或多余的HTML標簽,僅僅需要添加一些CSS屬性并從好的方面考慮。這個方案是清晰的和比較有效的,而且可以讓你免于花費幾小時來尋找精巧的瀏覽器方案和基于JavaScript圓角。
7、邊框圖片
網站建設中Border-image屬性允許在元素的邊框上設置圖片,這使得原本單調的邊框樣式變得很豐富。讓你從通常的solid、dotted和其他邊框樣式中解放出來。改屬性給設計師一個更好的工具,用它可以方便地定義設計元素的邊框樣式,比background-imag屬性或枯燥的默認邊框樣式更好用。也可以明確的定義一個邊框可以被如何縮放或平鋪。
8、形變效果
網站建設通常使用CSS和HTML我們是不可能使用HTML元素旋轉或傾斜一定角度的。為了使元素看起來更具有立體感,我們不得不把這種效果做成一個圖片,這樣就限制了很多動態的使用應用場景。Transform數學的引入使我們以前通常要借助SVG等矢量繪圖手段才能實現的功能,只需要一個簡單的CSS屬性就能實現。
9、媒體查詢
媒體查詢可以讓你為不同設備基于它們的能力定義不同的樣式。如在可視區域小于400像素的時候,想讓網站側欄顯示在主內容的下邊,這樣它就不應該浮動并顯示在右側了。
10、CSS3線性漸變
漸變色是網頁設計中很常用的一項元素,它可以增強網頁元素的立體感,同事使單一顏色的頁面看起來不是那么突兀。過去為了實現漸變色,通常需要先制作一個漸變的圖片,將它切割成很細的一小片,然后使用背景重復是整個HTML元素擁有漸變的背景色。這樣做有兩個弊端:為了使用圖片背景,很多時候使得本身簡單的HTML結果變得復雜;另外,受制于背景圖片的長度火寬度,HTML元素不能靈活的冬天調整大小。CSS3中Webkit和Mozilla對漸變都有強大的支持。
成都蜀風科技打造與企業品牌相匹配的網站及微信開發,對每一個網站建設和微信開發項目,都以策略先行,再將創意與技術完美結合。 為企業打造出與企業品牌氣質相匹配的網絡品牌形象。 我們始終保持行業領先開發水平,不斷掌握領先的網絡技術。
Cascading Style Sheets(層疊樣式表),簡稱 CSS,是前端開發中不可或缺的一部分。它為網頁提供了美觀和一致的外觀,同時也為用戶提供了更好的用戶體驗。本文將引導你從 CSS 的基礎入門到精通,幫助你成為一名優秀的前端開發者。
簡介
三角的做法有好幾種:
這里主要介紹的純代碼寫的。
優點
原理
原理就是使用css的盒模型中的border屬性
使用border屬性就可以實現一個兼容性很好的三角圖形效果,其底層受到border-style的inseet/outset影響,邊框3D效果在互聯網早期還是很流行的,。
1. 先創建一個div
<div></div>
2. 然后給div設定邊框。
div{ width:200px; height:100px; border:10px solid red; }
可以看到效果:
3. 給div的四個邊框都設置不同的顏色
div{ width:200px; height:100px; border-left:10px solid red; border-top:10px solid green; border-right:10px solid blue; border-bottom:10px solid yellow; }
可以看到以下效果:
可以看到兩個border交叉的地方,有斜邊存在。
4. 把寬度和高度都變成0
div{ width:0px; height:0px; border-left:10px solid red; border-top:10px solid green; border-right:10px solid blue; border-bottom:10px solid yellow; } /*也可以這么寫*/ div{ width:0px; height:0px; border:10px solid; border-color:red green blue yellow; }
可以看到以下效果:
這個時候就看得很明顯了,出現了四個三角。那如果要出現一個,那么就將其他的三個弄成透明色就可以了。
這個就是三角形的由來。
5. 其余角為透明
這里的設置也遵循 上右下左 的順序,把不需要的角弄成透明色。
div{ width:0px; height:0px; border-width:10px; border-color:#f00 transparent transparent transparent; border-style:solid; } /*也可以再進行合并*/ div{ width:0px; height:0px; border:10px solid; border-color:#f00 transparent transparent transparent; }
這樣一個三角就完成了。 那么問題來了,那就是兼容問題,IE6的兼容問題,如果不要求兼容IE6可以忽略下一步。
6. 兼容IE6瀏覽器
同樣的一個三角,在IE6的顯示是什么呢?
造成這樣的原因是:
在IE6下面,如果想把元素例如div設置成19像素以下的高度就設置不了了。這是因為IE6瀏覽器里面有個默認的高度,IE6下這個問題是因為默認的行高造成的。
最簡單的解決辦法:(后面添加)
div{ /*不支持transparent*/ border-style:solid dashed dashed dashed; /*高度最小不為0*/ overflow:hidden; }
div{ border:solid 1px transparent; _border-color:tomato; _filter:chroma(color=tomato); }
所以我覺得用在這里也可以, BUT沒有親測過,如果哪位小可愛測過可以請告知我^ ^。
div{ width:0px; height:0px; margin:100px auto; border-width:10px; border-style:solid; border-color:#f00 transparent transparent transparent; _border-color:#f00 tomato tomato tomato; _filter:chroma(color=tomato); }
div{ height:0; font-size:0; line-height:0; overflow:hidden; }
7. 解決內聯元素的三角顯示問題
為什么會有這個問題
因為我們剛才用 <div> 去制作三角,當然我們經常會使用 <em><i> 或者偽元素去做一些小圖標。那么在顯示上面,可能會有問題。 下面的代碼:
<style> em{ width: 0; height: 0; border-width: 50px; border-color: transparent transparent transparent #f40; border-style: solid; } </style> <em></em>
可以看到頁面是這個樣子的:
為什么是這個樣子的,那么我們再看的仔細一點。 它實際是這個樣子的。
造成這樣的原因
解決辦法
這個有很多的辦法:
1. 去掉固定的內容高度
使用font-size:0;可以去掉內容的固定高度。
em{ border-width: 50px; border-color: transparent transparent transparent #f40; border-style: solid; font-size: 0; }
2. 將內聯元素轉化為塊級元素或者行內塊元素
em{ border-width: 50px; border-color: transparent transparent transparent #f40; border-style: solid; display: block; /*也可以是inline-block*/ }
3. 將元素脫標(如果涉及特殊的布局可以直接使用)
/*脫標*/ em{ border-width: 50px; border-color: transparent transparent transparent #f40; border-style: solid; position: absolute; top:0; left:0; } /*or 浮動*/ em{ border-width: 50px; border-color: transparent transparent transparent #f40; border-style: solid; float:left; }
最終代碼
下面就是兼容了IE6版本的三角代碼。
div{ width:0px; /*設置寬高為0*/ height:0px;/*可不寫*/ border-width:10px; /*數值控制三角的大小,垂直的位置*/ border-color:#f00 transparent transparent transparent;/*上右下左,transparent是透明的*/ border-style:solid dashed dashed dashed;/*設置邊框樣式,dashed是兼容IE6寫的*/ overflow:hidden;/*兼容IE6最小高度不為0寫的*/ }
改變border-width,三角變大,是不失真的。很清晰。
==三角制作完成 。==
擴展
有角度的三角
上面制作的都是45度的三角,三角可以通過border的高度寬度確定角度。
比如這樣一個三角,只需要確定上下的和左右的寬度不一樣即可。
div{ width: 0px; height: 0px; margin: 100px auto; border-width:10px 30px; border-color:transparent transparent transparent red; border-style:solid; }
有一個角是直角的三角
觀察可以看到,是上面和右面的三角同時設置成一個顏色。就會出現直角的三角。
div{ width: 0; border-width: 20px 10px; border-style: solid; border-color: red red transparent transparent; }
箭頭
其實原理也簡單,就是兩個三角重疊在一起。上面的三角就是背景的顏色
<style type="text/css"> .san { border-width: 50px; border-color: transparent transparent transparent #f40; border-style: solid; position: relative; } .si { border-width: 30px; border-color: transparent transparent transparent #fff; border-style: solid; position: absolute; left: -50px; top: -30px; } </style> <!--html結構--> <div class="san"> <div class="si"></div> </div>
對話框
這個使用偽元素去做就很方便。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。