色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
电子发烧友
开通电子发烧友VIP会员 尊享10大特权
海量资料免费下载
精品直播免费看
优质内容免费畅学
课程9折专享价
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

CSS3圓角知識的詳細講解

電子設計 ? 來源:電子設計 ? 作者:電子設計 ? 2020-12-24 15:40 ? 次閱讀

一、瀏覽器支持

表中的數字指定完全支持該屬性的第一個瀏覽器版本。

數字后面的 -webkit- 或者 -moz- 使用時需要指定前綴。

屬性ChromeFirefoxSafariOperaIEborder-radius5.0 4.0 -webkit-9.04.0 3.0 -moz-5.0 3.1 -webkit-10.5

二、border-radius 屬性

1. 創建具有背景圖的圓角

CSS3中,可以使用border-radius屬性,為元素指定圓角顯示。

代碼如下:

<!DOCTYPE html> <html> <meta charset="UTF-8"> <title>項目</title>
<head> <style> #rcorners1 { border-radius: 25px; background: #f00; padding: 20px; width: 200px; height: 150px; }
#rcorners2 { border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; }
#rcorners3 { border-radius: 25px; background: url(img/fy_indexBg.jpg); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; }</style> </head>
<body>
<p>The border-radius property allows you to add rounded corners to elements.</p> <p>Rounded corners for an element with a specified background color:</p> <!--1.具有指定背景色的圓角元素--> <p id="rcorners1">Rounded corners!</p> <p>Rounded corners for an element with a border:</p> <!--2.帶邊框的圓角元素:--> <p id="rcorners2">Rounded corners!</p> <!--3.帶背景圖的圓角元素--> <p>Rounded corners for an element with a background image:</p> <p id="rcorners3">Rounded corners!</p>
</body>
</html>

提示:

border-radius屬性實際是border-top-left-radius, border-top-right-radius, border-bottom-right-radius 和 border-bottom-left-radius 屬性的簡寫。

2. 為每個角指定弧度

如果只為border-radius屬性指定一個值,則此半徑將應用于所有4個角。

另外可以根據自己開發的需求,分別指定每個角。以下是規則:

四個值: 第一個值適用于左上角,第二個值適用于右上方,第三值應用于右下角,第四值適用于左下角。

三個值: 第一個值適用于左上,二值適用于右上和左下,右下第三值適用于。

兩個值: 第一個值適用于左上和右下角,和二值適用于右上和左下角。

一個值: 所有的四個角都是圓的。

實例1:

1.四個值 - border-radius: 15px 50px 30px 5px

#rcorners4 { border-radius: 15px 50px 30px 5px; background: #f00; padding: 20px; width: 200px; height: 150px;}

2.三個值 - border-radius: 15px 50px 30px

#rcorners5 { border-radius: 15px 50px 30px; background: #f00; padding: 20px; width: 200px; height: 150px;}

3.兩個值 - border-radius: 15px 50px

#rcorners6 { border-radius: 15px 50px; background: #f00; padding: 20px; width: 200px; height: 150px;}

完整代碼 :

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>項目</title> <style> #rcorners4 { border-radius: 15px 50px 30px 5px; background: #f00; padding: 20px; width: 200px; height: 150px; }
#rcorners5 { border-radius: 15px 50px 30px; background: #f00; padding: 20px; width: 200px; height: 150px; }
#rcorners6 { border-radius: 15px 50px; background: #f00; padding: 20px; width: 200px; height: 150px; }</style></head><body>
<p>四個值 - border-radius: 15px 50px 30px 5px:</p><p id="rcorners4"></p>
<p>三個值 - border-radius: 15px 50px 30px:</p><p id="rcorners5"></p>
<p>兩個值 - border-radius: 15px 50px:</p><p id="rcorners6"></p>
</body></html> 實例2:

創建橢圓形的圓角

創建橢圓形的圓角

橢圓邊框 :border-radius: 50px/15px

#rcorners7 { border-radius: 50px/15px; background: #73AD21; padding: 20px; width: 200px; height: 150px;}

橢圓邊框 : border-radius: 15px/50px

#rcorners8 { border-radius: 15px/50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }

橢圓邊框 : border-radius: 50%

#rcorners9 { border-radius: 50%; background: #73AD21; padding: 20px; width: 200px; height: 150px; }

完整代碼:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>項目</title> <style> #rcorners7 { border-radius: 50px/15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
#rcorners8 { border-radius: 15px/50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
#rcorners9 { border-radius: 50%; background: #73AD21; padding: 20px; width: 200px; height: 150px; }</style></head><body>
<p>橢圓邊框 - border-radius: 50px/15px:</p> <p id="rcorners7"></p>
<p>橢圓邊框 - border-radius: 15px/50px:</p> <p id="rcorners8"></p>
<p>橢圓邊框 - border-radius: 50%:</p> <p id="rcorners9"></p>-->
</body></html>

三、總結

1、本文主要講解了CSS3圓角,通過一些屬性的演示,豐富的案例,幫助大家理解CSS知識。希望大家可以耐心的去學習,同時希望碰到問題主動搜索,嘗試一下,總會有解決方法。

2、代碼很簡單,希望能幫到你。

審核編輯:符乾江
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 代碼
    +關注

    關注

    30

    文章

    4887

    瀏覽量

    70259
  • CSS3
    +關注

    關注

    0

    文章

    9

    瀏覽量

    3933
收藏 0人收藏

    評論

    相關推薦
    熱點推薦

    馬達控制上必要的知識函數

    為了理解馬達控制技術,必須理解如下基礎學問。 (1) 數學:三函數,指數函數,復數函數,微分,積分,矩陣,坐標(直交,極) (2) 電氣電路:交流理論(3 相交流, 歪交流),過渡現象 (3
    發表于 03-18 12:23

    L298電機驅動模塊的詳細講解

    電動小車的組成 ? 一個電動小車整體的運行性能,首先 取決于它的電源模塊和電機驅動模塊。 ? 電機驅動模塊主要功能:驅動小車輪子 轉動,使小車行進。 ? 電源模塊:顧名思義,就是為整個系統 提供動力支持的部分 下載PDF文檔了解L298電機驅動模塊詳細講解
    發表于 02-26 15:53

    功率器件熱設計基礎知識

    功率器件熱設計是實現IGBT、碳化硅SiC等高功率密度器件可靠運行的基礎。掌握功率半導體的熱設計基礎知識,不僅有助于提高功率器件的利用率和系統可靠性,還能有效降低系統成本。本文將從熱設計的基本概念、散熱形式、熱阻與導熱系數、功率模塊的結構和熱阻分析等方面,對功率器件熱設計基礎知識
    的頭像 發表于 02-03 14:17 ?613次閱讀

    制造及直拉法知識介紹

    是集成電路、功率器件及半導體分立器件的核心原材料,超過90%的集成電路均在高純度、高品質的晶上制造而成。晶的質量及其產業鏈供應能力,直接關乎集成電路的整體性能和競爭力。今天我們將詳細
    的頭像 發表于 01-09 09:59 ?977次閱讀
    晶<b class='flag-5'>圓</b>制造及直拉法<b class='flag-5'>知識</b>介紹

    的TTV,BOW,WARP,TIR是什么?

    的TTV、BOW、WARP、TIR是評估晶質量和加工精度的重要指標,以下是它們的詳細介紹: TTV(Total Thickness Variation,總厚度偏差) 定義:晶
    的頭像 發表于 12-17 10:01 ?1971次閱讀
    晶<b class='flag-5'>圓</b>的TTV,BOW,WARP,TIR是什么?

    什么是晶? #電路知識 #芯片 #芯片晶

    芯佰微電子
    發布于 :2024年12月13日 10:38:31

    什么是晶微凸點封裝?

    微凸點封裝,更常見的表述是晶微凸點技術或晶級凸點技術(Wafer Bumping),是一種先進的半導體封裝技術。以下是對晶微凸點封裝的詳細
    的頭像 發表于 12-11 13:21 ?760次閱讀

    芯片封裝工藝詳細講解

    芯片封裝工藝詳細講解
    發表于 11-29 14:02 ?1次下載

    Tailwind CSS v4.0發布首個Beta版本

    Tailwind CSS 是一個為快速開發而精心設計的原子類 CSS 框架,它提供了充滿設計感和應用程序至上的能力來創建組件,它在最新的 2.0 版本中加入了暗黑模式,開箱即用。
    的頭像 發表于 11-25 10:02 ?592次閱讀
    Tailwind <b class='flag-5'>CSS</b> v4.0發布首個Beta版本

    切割技術知識大全

    切割劃片技術作為半導體制造流程中的關鍵環節,其技術水平直接關聯到芯片的性能、良率及生產成本。
    的頭像 發表于 11-08 10:32 ?1730次閱讀
    晶<b class='flag-5'>圓</b>切割技術<b class='flag-5'>知識</b>大全

    基于CSS融合存儲系統的自動化制造服務平臺存儲解決方案

    基于CSS融合存儲系統的自動化制造服務平臺存儲解決方案
    的頭像 發表于 09-10 10:15 ?552次閱讀
    基于<b class='flag-5'>CSS</b>融合存儲系統的自動化制造服務平臺存儲解決方案

    電感技術的講解

    詳細講解電感的原理及計算
    的頭像 發表于 09-06 02:07 ?2779次閱讀
    電感技術的<b class='flag-5'>講解</b>

    第12章-ADC采集電壓和顯示 基于STM32的ADC—電壓采集(詳細講解+HAL庫)

    第12章-ADC采集電壓和顯示 基于STM32的ADC—電壓采集(詳細講解+HAL庫)
    的頭像 發表于 08-21 16:31 ?4965次閱讀
    第12章-ADC采集電壓和顯示 基于STM32的ADC—電壓采集(<b class='flag-5'>詳細</b><b class='flag-5'>講解</b>+HAL庫)

    PGA900能直接在CSS上編程嗎?

    您好,PGA900能直接在CSS上編程嗎? 可以通過XDS200下載程序到PGA900上面嗎?
    發表于 08-08 07:31

    Arm終端CSS革新,加速端側人工智能時代

    在當今信息化與智能化的交匯點,人工智能的發展勢頭正盛。尤其是在端側人工智能領域,其對于計算平臺的性能、能效以及集成度的要求日益提升。近日,全球領先的半導體知識產權(IP)提供商Arm,再次引領行業潮流,推出了全新的Arm終端計算子系統(CSS),旨在打造迄今為止速度最快、
    的頭像 發表于 06-24 18:23 ?1774次閱讀
    主站蜘蛛池模板: 高h 纯肉文| 仓井空torrent | 国产自产第一区c国产 | 久久三级网站 | 最近2018年手机中文字幕 | 精品午夜视频 | 国产偷国产偷亚洲高清人乐享 | 亚洲欧美一区二区久久 | 在线精品国精品国产不卡 | 一道精品视频一区二区 | 亚洲成 人a影院青久在线观看 | 精品成人片深夜 | 欧美黑大炮18p | 调教美丽的白丝袜麻麻视频 | 韩剧甜性涩爱 | 俄罗斯另类Z0Z0ZOZO | 亚洲精品国产高清嫩草影院 | 国产h视频在线观看免费 | 午夜精品久久久久久久爽牛战 | 三级黄色片免费观看 | 邪恶肉肉全彩色无遮盖 | 久久操热在线视频精品 | 偷拍精品视频一区二区三区 | 久久国产高清视频 | 伊人网综合 | 啪啪激情婷婷久久婷婷色五月 | 啪啪做羞羞事小黄文 | 美女MM131爽爽爽 | 暖暖的视频完整视频免费韩国 | 国产成人无码视频一区二区三区 | 欧洲亚洲精品A片久久99果冻 | 久久久午夜精品福利内容 | 无码一区国产欧美在线资源 | china男士同性视频tv | 国产免费人成在线视频有码 | 亚洲精品一二三区-久久 | 儿子操妈妈视频 | 在线 自拍 综合 亚洲 欧美 | 手机移动oa| 中文字幕人成人乱码亚洲影视 | 亚洲人成无码久久久AAA片 |

    電子發燒友

    中國電子工程師最喜歡的網站

    • 2931785位工程師會員交流學習
    • 獲取您個性化的科技前沿技術信息
    • 參加活動獲取豐厚的禮品