|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 很多時候在開發網頁前端的時候,為了讓網頁上面的東西看起來更加的舒服,我們可能需要設置一些圓角的效果,比如圓形的頭像、圓角的
按鈕等等。那么這些圓角效果是如何用css樣式實現的,本章就給大家介紹css如何設置邊框的圓角樣式?border-radius屬性設置邊框的樣式(圖
文)。有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。在css樣式中有一個屬性:border-radius屬性是就常見 ,也是最簡單、快速設置圓角效果的屬性;border-radius(含義是"邊框半徑"),只需要給border-radius 提供值,就能設置邊框圓角的半徑。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等都可以。 border-radius包含5種設置圓角樣式方式: 圖片示例(設置四個邊框圓角值為20px):
border-radius的參數說明: border-radius可以一次性對四個角設置相同的值,也可以對4個角分別設置圓角樣式。而秘訣就在于設定border-radius的參數個數,border-radius的參數個數范圍為1~4個。 下面分別說明參數1~4個所代表的含義: 1. 當參數個數為:1 說明:4個邊框的圓角樣式都采用這個設置。 例: border-radius:20px;/*4個邊框圓角樣式都為20px*/
2.當參數個數為:2 說明: 第1參數:左上角和右下角邊框的圓角樣式。 第2參數:右上角和左下角邊框的圓角樣式。 例: border-radius:20px 10px;/*左上角和右下角:20px;右上角和左下角:10px*/
3. 當參數個數為:3 說明: 第1參數:左上角邊框的圓角樣式。 第2參數:右上角和左下角邊框的圓角樣式。 第3參數:右下角邊框的圓角樣式。 例: border-radius:20px 10px 40px;/*左上角:20px;右上角和左下角:10px;右下角:40px*/
4.當參數個數為:4 說明: 第1參數:左上角邊框的圓角樣式。 第2參數:右上角邊框的圓角樣式。 第3參數:右下角邊框的圓角樣式。 第4參數:左下角邊框的圓角樣式。 例: border-radius:20px 10px 50px 30px;/*左上角:20px;右上角:10px;右下角:50px;左下角:30px*/
當然上圖的樣式也可以用圓角的單獨樣式來設置: border-top-left-radius :20px。 border-top-right-radius :10px。 border-bottom-left-radius :30px。 border-bottom-right-radius :50px。 只是這樣設置太過于繁瑣,不利于優化了css文件代碼。 圓形邊框(實例介紹) <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 100px;
height: 100px;
border: 1px solid salmon;
background-color: salmon;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>只要把border-radius里的值設置為100%,就可以得到這樣的一個圓形邊框。圓形邊框可以用在用戶的頭像展示等等方法。 效果圖:
總結: border-radius屬性是一個簡單又方便且實用的設置邊框圓角樣式的方法,在前端頁面開發的很多地方得到應用;具體的使用方法,要看實際的需要。 以上就是css如何設置邊框的圓角樣式?border-radius屬性設置圓角樣式(圖 文)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!