您現在的位置是:電腦技術吧?>? 基礎知識 ??>??圓角矩形,如何調整圓角矩形??>??正文詳情

圓角矩形,如何調整圓角矩形

浮琦珍2019-11-07 12:32:11 人圍觀
簡介ai怎么調整矩形的圓角所謂的高級CSS技能實際上是一些基本技能的創造性組合任何手段和技能都是解決問題的方法只要你學會了這種思維方式,你也可以有自己的CSS腳本CSS2無法創建曲線

所謂的CSS高級技巧...其實是一些對基本技巧的創意組合, 任何手段和技巧都是解決問題的方法. 只要學會這種思考問題的方法, 你也能擁有屬于自己的CSS秘籍.  CSS2 還沒有辦法創造出曲線邊框, 明顯的, 僅僅方框是沒辦法滿足我們設計師的. 所以CSS圓角技術到現在還是那么的火.  1. 固定寬度的純色圓角矩形

  在眾多圓角技術中, 固定寬度的圓角矩形應該是最容易實現的, 只需要2個圖片以及一段簡單的html代碼.  html代碼如下: Webjx.Com  標題  內容  圖片大致如下:

  top.gif bottom.gif  CSS代碼大致如下:  .wrapper{width:181px;background:#8cc355 url(../images/bottom.gif) no-repeat left bottom;}  .wrapper h1{padding:10px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;}  .wrapper p{padding:0 20px 10px 20px;}  Tips:  wrapper中的寬度(width)是圖片的真實寬度, 背景中的背景色是與純色圖片相同的顏色.  h1和p中相應設置了內補丁,為了內容不重疊或碰到外框.  圖片需要有背景色, 即除了圓角矩形純色部分的顏色以外的區域需要有和當前容器( div class=wrapper )所在的父級容器相同的背景色.  這種方法適用于寬度固定, 高度自適應的純色圓角矩形.  2. 固定寬度的非純色圓角矩形

  這個方法是上一個方法的延伸, 這次我們不在容器上定義背景色, 而是定義重復的背景圖片.  html代碼如下:  標題  內容  圖片大致如下: 網頁教學網

  top.gif bottom.gif tile.gif  CSS代碼大致如下:  .wrapper{width:183px;background:url(../images/tile.gif) repeat-y center;}  .wrapper h1{padding:20px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;}  .wrapper p{padding:0 20px 20px 20px;background:url(../images/bottom.gif) no-repeat left bottom;}  Tips:  特性與第一個方法類似;  不能適用于非垂直改變的背景圖像.  PS. 固定高度的圓角矩形也可以類似的完成,不贅述了  3. 滑動門技術(Sliding Doors)  前面的兩種圓角矩形都是固定寬度的,只能在垂直方向上自適應增長(或水平方向上), 如果需要同時在垂直方向與水平方向上自適應增長尺寸的話, 很顯然前兩種方法不適用. 這時我們就可以采用所謂的滑動門技術.  原理:

  Top-Left.gif 與 Bottom-Left.gif 都是大圖像, Top-Right.gif 和 Bottom-Right.gif 都是小圖像, 小圖像在大圖像上根據尺寸進行自動滑動以適應內容.  該方法用到2組4個圖片: 1組Top圖片構成頂部圓角, 1組Bottom圖片構成底部圓角以及主體. 注意容器的最大高度和寬度不能超過圖片的最大高度和寬度.  圖片的結構位置: 網頁教學網

  html代碼大致如下:  標題  內容  CSS代碼大致如下:  .wrapper{width:20em;background:#ccc url(../images/bottom-left.gif) no-repeat left bottom;}  .box-outer{background:url(../images/bottom-right.gif) no-repeat right bottom;}  .box-inner{background:url(../images/top-left.gif) no-repeat left top;}  .wrapper h1{padding:2%;background:url(../images/top-right.gif) no-repeat right top;}  .wrapper p{padding:2%;}  Tips:  該方法很好的解決了容器擴展的問題, 但是要注意容器的最大尺寸不要超過背景圖片所能構成的最大尺寸;  該方法需要2組額外的沒有任何語義的標簽, 在結構上并不理想, 我們可以用JavaScript和DOM動態添加額外元素來避免這個問題, JavaScript不作討論.  滑動門適用范圍很廣, 以至于隨處可見.  4. 山頂角(MountainTop)  Web大師Dan Cederholm的發明, 和他在Web Standard Solutions中的變色龍小圖標有異曲同工之妙.  如果用 3.滑動門 的技術創建多種顏色的圓角矩形, 那是不是要建立多組不同顏色的圖片呢? 那是不是會很麻煩呀? 幸運的是Dan為我們帶來了山頂角. 他建立的不是多種顏色的圖片組, 而是一組圓角的蒙板. 用蒙板蓋住背景色, 生成圓角矩形, 這種逆向思維令人敬佩.

  圓角蒙板  基本的HTML代碼和CSS代碼與上例相同, 也需要4個不同的圓角蒙板. 代碼不做重復.  Tips:  可以使用.png來創建圓滑的透明蒙板, 但介于IE6和以下版本不支持png-24的透明效果, 需要用到Hacks, 所以不太推薦. 所以對于gif圖片的蒙板, 對于小弧度的圓角矩形效果較好, 大弧度的圓角矩形可能會出現鋸齒. 同樣的需要添加額外的非語義標簽, 語義化狂熱者們可以用JavaScript來完成這個工作.  5. CSS Sprites 圓角  CSS Sprites并不是專門制作圓角矩形的, 但是它提供了一種制作圓角矩形的方案.

  結構構成圖

  實際用到的圓角小圖  只單單用background的position來指定圓角圖片背景定位, 但是會多出很多額外標簽, 這里不做推薦.

版權聲明:本文由 浮琦珍 整理編輯。

原標題:圓角矩形工具,圓角矩形工具在哪

轉載注明出處:http://www.dn9ww09s.icu/basics/11416.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 筆記本組裝配置清單,臺式機組裝清單

    筆記本組裝配置清單,臺式機組裝清單 相關圖片電腦主機組裝隨著時代的發展,計算機已成為人們生活的必需品筆記本電腦以其輕巧方便贏得了許多年輕人的青睞不過,對于很多只在家里使用或喜歡游戲的朋友來說,臺式電腦是更好...

  • 網頁優化包括什么,網站怎么優化

    網頁優化包括什么,網站怎么優化 相關圖片如何提高性功第一期回顧:《有圖有案例!125個提升網頁可用性的優化小技巧(一)》  讓常用功能和重要數據信息更接近用戶  預測用戶的意圖,讓他們盡可能接近目標。  △ 篩選...

  • 機械硬盤和固態硬盤的區別,固態硬盤和機械硬盤哪個好

    機械硬盤和固態硬盤的區別,固態硬盤和機械硬盤哪個好 相關圖片ssd硬盤隨著科學技術的發展,固態硬盤(SSD)應運而生ssd分發已經有很長一段時間了不過,目前主流的安裝方式仍然是選擇傳統的機械硬盤,而大部分的固態硬盤都采用高端配置安ssd固...

  • 電腦開機顯示器黑屏,開機顯示器沒反應

    電腦開機顯示器黑屏,開機顯示器沒反應 相關圖片顯示器亮一下就黑屏當電腦開機時,顯示器的黑屏通常是硬件問題很多用戶都想檢查并解決這個問題打開電腦后,小編將分享顯示屏黑屏的解決方案如果你需要知道,你可以看看顯示器...

  • background_,background是什么

    background_,background是什么 相關圖片html中background下面是我想使用的背景圖:代碼如下:在HTML頁面中,有162*162個灰色背景div塊和三種不同位置的背景圖片在瀏覽器中看到的效果可以從上圖中看到:當它是背景位background設置...

  • 怎么把照片傳到電腦上,手機照片怎樣傳到電腦上

    怎么把照片傳到電腦上,手機照片怎樣傳到電腦上 相關圖片手機照片直接傳到u盤里在我們的日常生活中,手機中的照片越來越多,不僅占據了手機的存儲空間,而且影響了手機的運行速度因此,經常有必要將手機拍攝的照片轉移到電腦上,以節...

  • 筆記本電腦無線網卡怎么打開,筆記本無線網卡在哪

    筆記本電腦無線網卡怎么打開,筆記本無線網卡在哪 相關圖片筆記本電腦怎么打開無線網絡在無線網絡普及的時代,網絡的使用越來越普遍,無線網卡的功能就像普通的計算機網卡一樣被用來連接局域網有筆記本電腦的用戶問如何打開筆記本電腦...

  • 字體設計教程,文字排版設計

    字體設計教程,文字排版設計 相關圖片ps字體設計藝術字教程文本鏈接是網頁中最常見的頁面元素默認情況下,文本鏈接的樣式為下劃線,這使得網頁無法突出個性和滿足布局的需要為了使文本鏈接符合頁面的整體效果,可以...

  • 電腦運行速度慢的解決方法,筆記本電腦運行慢怎么解決

    電腦運行速度慢的解決方法,筆記本電腦運行慢怎么解決 相關圖片電腦慢卡 怎樣解決雖然計算機的使用過于落后,但計算機運行緩慢的問題是不可避免的,特別是在最關鍵的時候,計算機被卡住了這是一件很麻煩的事情,但是由于錢已經熟悉了舊電腦...

  • 錨記鏈接,網頁錨記鏈接

    錨記鏈接,網頁錨記鏈接 相關圖片錨點鏈接使用命名錨定,可以在文檔中設置標記,這些標記通常放置在文檔中特定主題的頂部然后,您可以創建指向這些命名錨的鏈接,如果網頁中有很多內容并且網頁很長,則可以快...

熱評文章

  • 筆記本電腦鍵盤錯亂,筆記本電腦鍵盤失靈錯亂

    筆記本電腦鍵盤錯亂,筆記本電腦鍵盤失靈錯亂 相關圖片為什么電腦鍵盤錯亂許多游戲玩家,特別是喜歡玩筆記本電腦游戲的大學生,在連接外部鍵盤后發現筆記本電腦的鍵盤按鍵紊亂另外還有一些情況會導致筆記本鍵盤按鍵紊亂,那么如何...

  • overflow,stackoverflow

    overflow,stackoverflow 相關圖片div overflow溢出有問題嗎沒問題那我們為什么要小心使用呢因為有時會導致一些溢出的問題:Auto,很多人貪圖它方便的書寫,直接用來清除浮點數但是Firefox使用overflooverflow都有哪些值...

  • 手機變電腦模擬器,電腦游戲手機玩模擬器

    手機變電腦模擬器,電腦游戲手機玩模擬器 相關圖片手機windows模擬器Android仿真器電腦版是在PC平臺上模擬Android手機系統,模擬Android手機運行環境,讓用戶在電腦上體驗Android游戲和應用的仿真器軟件哪個A電腦游戲模擬器...

  • 樣式優先級,行內樣式優先級

    樣式優先級,行內樣式優先級 相關圖片表樣式優先級按順序為首先,什么是CSS優先級所謂CSS優先級是指在瀏覽器中解析CSS樣式的順序當多個CSS選擇器選擇同一個元素(或內容)時,應該根據優先級選擇不同的CSS規則為什么內...

  • 筆記本電腦組裝教程,組裝電腦教程

    筆記本電腦組裝教程,組裝電腦教程 相關圖片組裝電腦入門教程我們都知道,買臺式組裝機,首先要買各種電腦配件,然后自己慢慢組裝然而,對于那些想自己組裝電腦或是第一次組裝的朋友,我們必須知道一些預防措施那么如何...

  • 希捷西數移動硬盤,西數移動硬盤

    希捷西數移動硬盤,西數移動硬盤 相關圖片希捷西數東芝移動硬盤十年之前的磁盤市場,希捷是當之無愧之牛耳,而西部數據則是苦苦的追趕者;十年之后,存儲市場發生了翻天覆地的變化,而希捷和西部數據的角色也在這十年...

  • 與和活的優先級,優先級

    與和活的優先級,優先級 相關圖片c 優先級網站和應用程序中的對話框通常描述信息并提供幾個選項最常見的選項數通常是一個具有最高優先級的選項,這是首選選項,而另一個選擇較少,這是次要選項(例如,用戶填...

  • 空當接龍怎么玩,紙牌接龍怎么玩

    空當接龍怎么玩,紙牌接龍怎么玩 相關圖片網上紅心大戰玩法紅心大戰類似于公主制的游戲我們的目標是扔掉手中的牌,避免得分,并且在比賽結束時盡量得到最低的分數紅心大戰是由四名隊員一起進行的,用一對沒有大小王的...

  • 文件夾刪除又自動生成,文件夾刪除了又生成一個

    文件夾刪除又自動生成,文件夾刪除了又生成一個 相關圖片文件夾刪除了以后當Dreamweaver用作項目時,網站下的每個文件夾都會自動生成一個“notes”文件夾,刪除后會立即再次生成在最近的項目中,一些童鞋意外地將所有“notes為什么刪除的文...

  • office2007激活工具,office2010激活工具

    office2007激活工具,office2010激活工具 相關圖片office2007怎么看激活Microsoft Office 2007是Microsoft最新的Office系列軟件它不僅優化了系統的功能,而且增強了系統的安全性和穩定性界面也給人一種愉悅office2007工具...

關注微信

变脸官网查询