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