課程
/前端開發(fā)
/CSS3
/css3實(shí)現(xiàn)網(wǎng)頁(yè)平滑過渡效果
三角形，的生成原理不懂，請(qǐng)將分析過程的資料（pdf文檔）發(fā)給為好嗎？謝謝！ xgqfrms#gmail.com (請(qǐng)將#替換為@)
2015-08-05
源自：css3實(shí)現(xiàn)網(wǎng)頁(yè)平滑過渡效果 1-6
正在回答
http://www.w3school.com.cn/tiy/t.asp?f=csse_border
這是W3C的一個(gè)border的一個(gè)測(cè)試，我改造了一下，你把一下代碼替代原來的p:
p?
{
? ? width: 100;
? ? height: 100;
? ? border-left: 50px solid green;
? ? border-right: 50px solid green;
? ? border-top: 50px solid yellow;
? ? border-bottom: 100px solid red;
}
我覺得這里的難點(diǎn)還是在border的形狀上，原來我以為border都是矩形的，其實(shí)是等腰梯形
還有一點(diǎn)是在將width和height改為0后，你也會(huì)發(fā)現(xiàn)border會(huì)自動(dòng)拼合在一起，擠掉原來width和height占據(jù)的位置，你在試著將其他三條邊改為透明
?border-left: 50px solid transparent;
? ? border-right: 50px solid transparent;
? ? border-top: 50px solid transparent;
就會(huì)得到一個(gè)三角形！
希望能夠幫你理解！
舉報(bào)
CSS3 打造頁(yè)面之間的平滑過渡效果，帶來神奇的體驗(yàn)
5 回答三角形不顯示
3 回答三角形制作看不懂，求高人解釋
5 回答三角形寫完不顯示
2 回答三角形啊 顯示方形了
2 回答三角形溢出問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2015-08-21
http://www.w3school.com.cn/tiy/t.asp?f=csse_border
這是W3C的一個(gè)border的一個(gè)測(cè)試，我改造了一下，你把一下代碼替代原來的p:
p?
{
? ? width: 100;
? ? height: 100;
? ? border-left: 50px solid green;
? ? border-right: 50px solid green;
? ? border-top: 50px solid yellow;
? ? border-bottom: 100px solid red;
}
我覺得這里的難點(diǎn)還是在border的形狀上，原來我以為border都是矩形的，其實(shí)是等腰梯形
還有一點(diǎn)是在將width和height改為0后，你也會(huì)發(fā)現(xiàn)border會(huì)自動(dòng)拼合在一起，擠掉原來width和height占據(jù)的位置，你在試著將其他三條邊改為透明
?border-left: 50px solid transparent;
? ? border-right: 50px solid transparent;
? ? border-top: 50px solid transparent;
就會(huì)得到一個(gè)三角形！
希望能夠幫你理解！