資訊專欄INFORMATION COLUMN
摘要：昨天在群里看到有人想做凸字型框，今天用幾分鐘做了一下，發(fā)現(xiàn)還蠻巧妙的，分享一下最終效果如下所示代碼在這兒一開(kāi)始我以為只要上下兩個(gè)圓角矩形拼接就行，，其實(shí)兩個(gè)圓角相交處還有圓角，一看這個(gè)圓角就知道，可以使用白色的圓角矩形覆蓋，那么問(wèn)題來(lái)了白色
昨天在群里看到有人想做凸字型框，今天用幾分鐘做了一下，發(fā)現(xiàn)還蠻巧妙的，分享一下
最終效果如下所示
代碼在這兒：https://codepen.io/woshilyy/p...
一開(kāi)始我以為只要上下兩個(gè)圓角矩形拼接就行，NO NO NO，其實(shí)兩個(gè)圓角相交處還有圓角，一看這個(gè)圓角就知道，可以使用白色的圓角矩形覆蓋，那么問(wèn)題來(lái)了：
白色的圓角矩形覆蓋之后，中間會(huì)形成空隙，這個(gè)空隙需要藍(lán)色填滿。所以思路是這樣的：
一、先建立上下兩個(gè)圓角矩形：
HTML:
二：在上面的圓角矩形左右各加一個(gè)藍(lán)色色的圓角矩形，與上下兩個(gè)矩形相切，但是長(zhǎng)度和寬度都不能超過(guò)上下兩個(gè)大矩形
][2]
三：再在后來(lái)添加的小藍(lán)色矩形塊兒上，各增加一個(gè)大小一致的白色矩形覆蓋，分別設(shè)置右下圓角與左下圓角，代碼如下：
border-radius: 0 0 20px 0; border-radius: 0 0 0 20px;
OK，大功告成！一個(gè)凸型框就制作好啦，如果大佬有更好的方法，請(qǐng)指教嘻嘻~菜鳥(niǎo)的第一篇文章
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/113734.html
摘要：可交互視頻此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀定義，容器中包含個(gè)元素居中顯示定義容器尺寸畫出圓點(diǎn)定義動(dòng)畫效果最后，為各圓點(diǎn)增加動(dòng)畫延時(shí)大功告成 showImg(https://segmentfault.com/img/bVbdlnO?w=500&h=500); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽...
摘要：可交互視頻此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀定義，容器中包含個(gè)元素居中顯示定義容器尺寸畫出圓點(diǎn)定義動(dòng)畫效果最后，為各圓點(diǎn)增加動(dòng)畫延時(shí)大功告成 showImg(https://segmentfault.com/img/bVbdlnO?w=500&h=500); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽...
摘要：有幾個(gè)不同的因素致使它的流行。在這四個(gè)值中，我們最常用的就是將文本設(shè)置為斜體和將文本恢復(fù)為正常樣式。因此任何低于的值會(huì)顯得更細(xì)，而高于的值會(huì)顯得更粗。目前瀏覽器默認(rèn)為藍(lán)色，我們要把它改成和到元素一致的顏色。 隨著時(shí)間的推移，網(wǎng)絡(luò)字體排版已經(jīng)得到了很大的發(fā)展。有幾個(gè)不同的因素致使它的流行。其中被最廣泛認(rèn)可的因素是可嵌入我們自己的網(wǎng)絡(luò)字體的系統(tǒng)的開(kāi)發(fā)。 過(guò)去我們只能在網(wǎng)站中使用少量的字體。...
閱讀 1905·2021-09-28 09:43
閱讀 1206·2021-09-23 11:22
閱讀 2825·2021-09-14 18:05
閱讀 1886·2019-08-30 15:52
閱讀 2885·2019-08-30 10:55
閱讀 2103·2019-08-29 16:58
閱讀 1463·2019-08-29 16:37
閱讀 3111·2019-08-29 16:25
