|
導(dǎo)讀網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立... 網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語(yǔ)言之所以稱為超文本標(biāo)記語(yǔ)言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。 以前前端開發(fā)的時(shí)候，對(duì)于那些特殊的圖形，前端開發(fā)人員大部分的時(shí)候會(huì)使用圖片的剪裁來(lái)插入特殊的圖形，而現(xiàn)在隨著css3的發(fā)展，很多形狀可以通過(guò)css3畫出，本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于如何快速簡(jiǎn)單的使用css3畫出各種各樣的橢圓，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。使用css3畫出各種各樣的橢圓的原理 我們需要使用css3中的border-radius屬性，修改width值為200px，然后把border-radius改成100px / 50px;“/”之前的是水平半徑，”/”之后的是垂直半徑，所以 100px / 50px就讓div成了橢圓border-radius: 100px/50px; 我們既然需要使用css3中的border-radius屬性，那么今天我們將帶大家詳細(xì)了解一下border-radius屬性。 border-radius屬性
使用css3畫出各種各樣的橢圓的代碼 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
#rcorners1 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2{
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>實(shí)例效果如圖所示
應(yīng)用：使用css3畫出橢圓后插入圖片 <!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>橢圓形圖片</h2>
<p>使用 border-radius 屬性來(lái)創(chuàng)建橢圓形圖片：</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>實(shí)例效果如圖所示
以上就是如何快速簡(jiǎn)單的使用css3畫出各種各樣的橢圓的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！ 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個(gè)人學(xué)習(xí)測(cè)試使用，請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請(qǐng)支持購(gòu)買微軟正版軟件！
本站所有資源全部來(lái)自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請(qǐng)及時(shí)通知我們(peng896066052@126.com),我們會(huì)及時(shí)處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
