圓標是網頁表現手法很常見的一種方式，尤其電商，很常見用來突顯商品特價 產品 或新產品的標籤，以下介紹圓標的製作方式
先建立一個兩層結構的HTML如下，圓標文字包裹在內層div中
未方便辨識，先把兩個容器背景設為綠色及紅色的純色，這樣就能清楚了解容器範圍，並且先製作外層容器
接著用 CSS3.0 水平垂直居中的技巧，讓文字固定於正中間
再給文字添加一些樣式
透過顏色的區分，很容易看到兩個容器的關係，最後再慢慢調整文字及圓表尺寸顏色等樣式，以下是本教學的範例
See the Pen
文字圓標 by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
[……]
CSS選擇器中沒有所謂的「萬用字元(*)」，可以透過一些方式接近模糊查詢方式，查找匹配屬性或值的元素
下表屬性名稱不一定為Class，可以替換成需要的屬性
單引號可有可無
[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值
See the Pen
CSS 選擇器，模糊查找匹配元素 by VECTOR.cool (@ann71727)
on CodePen.
[……]
安裝 reCAPTCHA v3 之後，頁面右下角就會多出隱私權圖標這東西，在某些場合可能需要把它隱藏起來，可以透過下面方式隱藏
注意：請不要使用 display: none 這可能會使reCAPTCHA v3失去作用
https://wordpress.org/support/topic/how-do-i-hide-recaptcha-v3-badge/
https://wordpress.org/support/topic/recaptcha-v3-badge-is-displayed-on-all-pages-not-only-form-pages/
[……]
此做法前提，需要 iframe 內容在相同網域下
https://stackoverflow.com/questions/6494721/override-body-style-for-content-in-an-iframe
[……]
在被垂直居中元素的父類別，加這一段就可以，非常簡單
See the Pen Vertical and horizontal center by VECTOR.cool 威得數位
(@ann71727) on CodePen.
CSS 達成 Div 垂直置中的方法研究 (CSS Vertical Centering Complete Guide)
[……]
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}[……]
<style>
/* 水平鏡射 */
.flipx {
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
filter:FlipH;
}
/* 垂直鏡射 */
.flipy {
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
filter:FlipV;
}
</style>[……]