CSS 圓頁面跳轉可以為網站增添美觀小巧的效果。下面介紹兩種方法來實現。

//第一種方法，使用border-radius屬性和a標簽
a.circle {
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
text-align: center;
line-height: 100px;
color: #fff;
}
//html代碼
<a href="#" class="circle">跳轉</a>

第一種方法中，我們使用了CSS的border-radius屬性來實現圓形的效果，同時將a標簽設置為塊級元素，設置寬高為100px，即可實現一個圓形元素。在html代碼中，我們只需要使用a標簽并賦予circle類即可。當然，href屬性改成實際要跳轉的鏈接即可。

//第二種方法，使用偽元素
a.circle {
position: relative;
display: inline-block;
padding: 2em;
background-color: #f00;
color: #fff;
}
a.circle::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 50%;
background-color: rgba(255,255,255,0.25);
}
//html代碼
<a href="#" class="circle">跳轉</a>

第二種方法使用了偽元素來實現。我們為a標簽設置padding屬性，使得它變成一個寬高相等的元素。在偽元素中，我們使用了絕對定位和border-radius屬性，使得它變成一個半透明的圓形，放在a標簽下面。實際效果是，當鼠標移動到a標簽上，由于a標簽沒有半透明屬性，偽元素被顯示，同時又因為a標簽具有跳轉屬性，從而實現了圓形跳轉的效果。