css3幫你輕鬆實現圓角效果,不一樣的前端頁面。

来源:http://www.cnblogs.com/gongyue/archive/2017/11/09/7809257.html
-Advertisement-
Play Games

在Web前端頁面實現圓角效果,CSS3幫你輕鬆實現,一個人人皆知的屬性 圓角邊框的繪製是Web頁面和Web應用程式中經常用來美化頁面效果的手法之一。今天,小編為大家介紹CSS3提供的可以將矩形變為圓角矩形的一個屬性 技術等級:中級 | 適合有一定的CSS基礎的人士閱讀。 希望收藏了這篇文章的你同時也 ...


在Web前端頁面實現圓角效果,CSS3幫你輕鬆實現,一個人人皆知的屬性

圓角邊框的繪製是Web頁面和Web應用程式中經常用來美化頁面效果的手法之一。今天,小編為大家介紹CSS3提供的可以將矩形變為圓角矩形的一個屬性

技術等級:中級 | 適合有一定的CSS基礎的人士閱讀。

希望收藏了這篇文章的你同時也可以關註一下我,因為這些文章都是連載的,並且是經過系統的歸納和總結的。塌下心來認真閱讀,你一定會學到對你有用的知識。

本節涉及到的CSS3屬性為:

  • border-radius

一、圓角屬性的取值:

web前端/html5學習群:250777811

歡迎關註此公眾號→【web前端EDU】跟大佬一起學前端!歡迎大家留言討論一起轉發

CSS3 使用border-radius屬性設置圓角效果

該屬性可以通過設置圖片或塊級元素四個角的圓角半徑像素數來實現該效果。W3C規定該屬性的可能取值為:

  • none,預設值,表示元素沒有圓角效果

  • length,由浮點數字和單位標識組成的長度值

  • %,由百分比設置的圓角值

該屬性可以分別設置元素的四個圓角效果,採用下列格式來實現。

格式:border-radius: 左上角 右上角 右下角 左下角;

通常,四個方向的角半徑均採用length取值來實現,該取值必須為浮點數字和單位標識共同組成。同時規定,該取值不得取負數。

例1:利用整數來實現圓角取值。

div{

width: 200px; height: 150px;

border: solid 1px #aaaaaa;

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

background-color: #ff5857;

}

上述實例設置了一個div塊級元素,其寬度為200px,高度為150px。為了能夠看到其圓角效果,增加了顏色為#ff5857的背景顏色,並且添加了1px大小的邊框,其邊框為實線,邊框顏色為#aaaaaa。最後設置其圓角效果,左上角和右下角均為10px,右上角和左下角均為5px。

下麵我們通過圖示的形式,以左上角為10像素為例,來看一下這10元素是指哪段距離。一個角的圓角效果包括兩部分:“水平角半徑”和“垂直角半徑”。一個角的取值為一個數據,表示其“水平角半徑”和“垂直角半徑”是相等的。

水平角半徑與垂直角半徑相等

看來,border-radius屬性的取值應該為四個值,表示四個方向的圓角幅度。若該屬性在取值時,取值個數小於四個,又應該如何理解呢?

例2:查看下列CSS代碼。

(1)border-radius: 10px 5px 15px 20px;

(2)border-radius: 10px 5px 15px;

(3)border-radius: 10px 5px;

(4)border-radius: 10px;

上述四組代碼中,只有組(1)提供了完全符合格式的四個數據,其他三組均只提供了小於四個的數據。這種情況下,數據依然按照“左上角 右上角 右下角 左下角”的順序進行排列,沒有涉及到的角方向按照其對角的圓角數據進行設置

因此,組(2)的數據表示:左上角為10px,右上角為5px,右下角為15像素,左下角為右上角的像素設置,即5px。請同學們根據這樣的方法,理解一下組(3)的圓角含義。

組(4)就設置了一個數據,這表示四個方向的角半徑均為10px。

二、獨立設置元素的四個圓角效果:

若只想設置一個塊級元素右上角的圓角效果,該如何實現呢?這裡W3C為border-radius屬性派生出了表示四個方向的獨立圓角效果的子屬性。

  • border-top-left-radius, 定義左上角的圓角效果

  • border-top-right-radius, 定義右上角的圓角效果

  • border-bottom-right-radius, 定義右下角的圓角效果

  • border-bottom-left-radius, 定義左下角的圓角效果

上述四個子屬性的取值規則和border-radius屬性的取值規則是完全相同的。

例3:設置p標記的圓角效果,其中左下角沒有圓角效果,其他三個方向角的圓角效果均為25px。

方法1:利用border-radius屬性統一設置。

p{border-radius: 25px 25px 25px 0;}

方法2:利用border-radius屬性的派生子屬性設置。

p{

border-top-left-radius: 25px;

border-top-right-radius: 25px;

border-bottom-right-radius: 25px;

}

方法3:利用border-radius屬性設置所有角方向均為25px,再利用border-radius屬性的派生子屬性設置左下角沒有圓角效果。

p{

border-radius: 25px;

border-bottom-left-radius: none;

}

三、設置水平角半徑和垂直角半徑不同的圓角效果

W3C也提供了兩個角半徑不相同的圓角效果設置方式,這裡依然以左上角為例,來展示兩個角半徑不同的設置方式。

格式:border-top-left-radius:水平角半徑/垂直角半徑;

上述格式中,兩個方向的角半徑之間利用斜杠(/)間隔。

例4:設置div塊級元素的左上角圓角效果為:水平角半徑50px,垂直角半徑25px。

div{border-top-left-radius: 50px/25px;}

水平角半徑與垂直角半徑不相等

例5:設置div塊級元素為一個半徑為100px的正圓形。

div{

width: 200px; height: 200px;

background-color: #ff5857;

border: solid 1px #aaaaaa;

border-radius: 100px;

}

上述代碼中將塊級元素的圓角效果半徑設置為寬度或高度的一半,這樣就可以得到一個半徑為寬度或高度的一半的正圓形。

例6:設置div塊級元素為一個長半軸為100px,短半軸為75px的橢圓形。

div{

width: 200px; height: 150px;

background-color: #ff5857;

border: solid 1px #aaaaaa;

border-radius: 100px/75px;

}

上述代碼中將塊級元素的水平角半徑設置為寬度的一半,垂直角半徑設置為高度的一半。由於這個塊級元素的寬度和高度不一樣,因此就可以得到一個橢圓形。

四、利用百分比實現圓角效果:

W3C規定,同樣可以使用百分比來實現塊級元素的圓角效果。這裡,百分比值是相對於塊級元素的寬度或高度來作為依據的。水平角半徑的大小相對於塊級元素的寬度值依據,垂直角半徑的大小相對於塊級元素的高度值依據。

例7:查看下列CSS代碼。

div{

width: 200px; height: 200px;

border-radius: 20%;

}

上述代碼中,div標記的圓角效果中,水平角半徑為寬度的20%,即200px * 20% = 40px。垂直角半徑為高度的20%,也為40px。

例8:查看下列代碼。

div{

width: 200px; height: 100px;

border-radius: 20%;

}

 

上述代碼中,div標記的圓角效果中,水平角半徑為寬度的20%,即200px * 20% = 40px。垂直角半徑為高度的20%,即100px * 20% = 20px。

也就是說,只要border-radius的取值為50%,則當寬度和高度相同時,得到一個正圓形;當寬度和高度不相同時,得到一個橢圓形。

 

web前端/html5學習群:250777811

歡迎關註此公眾號→【web前端EDU】跟大佬一起學前端!歡迎大家留言討論一起轉發

 看過了還想看,手指點點關註我!

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.向下滑動 2.移動效果 3.事件與動畫結合 ...
  • 從大一開始學習前端,今年大三,10月份開始投簡歷,陸續收到很多家公司的面試,目前為止的面試通過率是百分之百,總結下麵試題。 今天晚上面的小米不太好,感覺自己回答非常不好,覺得百分百的通過率要終結了,後來面試官打來電話說還OK,真想不到,一會再說小米,他問的問題,哎,真是。。。 算了,說吧。 百度 一 ...
  • 引 如今,各種互聯網的Web應用程式層出不窮,那麼如何快速入門,成長為一個優秀的Web開發工作者呢? 這個問題不容易回答,幾乎所有的培訓機構都不能清晰地解答。 所以對於Web開發剛剛入門的菜鳥們,我覺得只有通過去做,去實驗,學會Web開發,可能是學著學著,實驗著實驗著就會了。 沒有人告訴你如何去做。 ...
  • 中文原地址 1.對所有的引用使用 const 而非 var。這能確保你無法對引用重覆賦值。 當需要變動引用時,使用let。 const和let都是塊級作用域。 2.創建對象的方式: const item = {}; 使用對象屬性的簡寫,且為簡寫的屬性分組。 3.創建數組的方式: const arr ...
  • 你有兩年以上的前端開發經驗嗎?你會用 Sass 和 Autoprefixer 等高級的CSS輔助技能嗎?你的 JavaScript 知識是否融匯貫通,你是否喜歡使用 Gulp , npm 和 jQuery ?如果是這樣,根據 Ashley Nolan 的前端問卷調查,你是一個典型的前端開發工程師。 ...
  • relative/static: 包含塊為最近的塊級框,表單元格或行內塊祖先框的內容邊界構成 absolute: 包含塊為最近的最近的、position不是static的祖先元素 fixed: 包含塊為視窗,結合top | left | right | bottom,left等初始值為auto ...
  • 個人博客記錄:2017-11-09 png 32位無損壓縮演算法形成的圖片,主要用於logo小圖標和一些點綴的小圖像。放大縮小不會失真,質量好 jpeg,jpg 壓縮比例較高(可達到100:1,即壓縮一百倍),放大縮小失真。適用於比較大的圖片,省流量 gif 動態圖,(你懂得),適用於動畫效果。 ...
  • 效果圖展示: 原理很簡單,主要運用transform這個樣式,通過斜切和旋轉達成 html: css: 怎樣,是不是很簡單 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...