你可以用兩種不同的技術實現一個透明的切出圓：

1.SVG

使用mask元素：

body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

有一個路徑元素：

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

svg{

display:block;

width:70%;

height:auto;

margin:0 auto;

}

path{

transition:fill .5s;

fill:#E3DFD2;

}

path:hover{

fill:pink;

}

在這種情況下使用SVG的主要優點是：

>較短的代碼

>您可以輕松使用圖像或漸變填充圓形蒙版

>保持形狀的邊界并且僅在相對于掩模的填充上觸發鼠標事件(在示例中懸停透明的切出圓圈)

2. CSS只使用Box-SHADOWS

創建一個div with overflow：hidden;和一個圓形偽元素在其內與border-radius。給它一個巨大的盒子陰影，沒有背景：

div{

position:relative;

width:500px; height:200px;

margin:0 auto;

overflow:hidden;

}

div:after{

content:'';

position:absolute;

left:175px; top:25px;

border-radius:100%;

width:150px; height:150px;

Box-shadow: 0px 0px 0px 2000px #E3DFD2;

}

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

瀏覽器對Box-shadows的支持是IE9，見canIuse

同樣的方法是使用border而不是Box-shadows。這是有趣的，如果你需要支持不支持像IE8的Box-shadows的borowsers。該技術是相同的，但你需要補償的頂部和左側的值，以保持圓在div的中心：

body{

background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');

background-size:cover;

}

div{

position:relative;

width:500px; height:200px;

margin:0 auto;

overflow:hidden;

}

div:after{

content:'';

position:absolute;

left:-325px; top:-475px;

border-radius:100%;

width:150px; height:150px;

border:500px solid #E3DFD2;

}

總結

以上是生活随笔為你收集整理的css空心半圆的实现,css – 透明空心或切出圆的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。