Bagaimana Membuat Bentuk Bulatan Songsang Menggunakan CSS3?-tutorial css-php.cn

Bagaimana Membuat Bentuk Bulatan Songsang Menggunakan CSS3?

Mary-Kate Olsen

Lepaskan： 2024-12-04 05:05:11

asal

599 orang telah melayarinya

How to Create an Inverse Circle Shape Using CSS3?

Bentuk CSS 3: Bulatan Songsang atau Bulatan Potong

Soalan:

Bagaimana saya boleh mencipta "bulatan songsang " bentuk, di mana pinggir luar bekas dipotong bulat, meninggalkan bulatan pepejal di dalam tengah?

Jawapan:

Pilihan Kecerunan Latar Belakang Jejari CSS3

(Untuk penyemak imbas moden seperti Firefox, Chrome, Safari, dan IE10)

Penyelesaian yang dipertingkatkan ini membolehkan "jurang" telus antara bulatan dan songsangnya potongan:

CSS:

.inversePair {
  border: 1px solid black;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
  background: grey;
  z-index: 1;
}

#b {
  width: 200px;
  padding-left: 30px;
  margin-left: -30px;
  border-left: none;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: -moz-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
  background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

Salin selepas log masuk

Jawapan Asal:

<div>

Salin selepas log masuk

.inversePair {
  border: 1px solid black;
  background: grey;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
}

#a:before {
  content: ' ';
  left: -6px;
  top: -6px;
  position: absolute;
  z-index: -1;
  width: 112px;
  height: 112px;
  border-radius: 56px;
  background-color: white;
}

#b {
  width: 200px;
  z-index: -2;
  padding-left: 50px;
  margin-left: -55px;
  overflow: hidden;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#b:before {
  content: ' ';
  left: -58px;
  top: -7px;
  position: absolute;
  width: 114px;
  height: 114px;
  border-radius: 57px;
  background-color: black;
}

Salin selepas log masuk

Kedua-dua penyelesaian menghasilkan kesan "bulatan songsang" yang menyenangkan secara visual, mencapai bentuk yang anda inginkan tanpa perlu imej.

Atas ialah kandungan terperinci Bagaimana Membuat Bentuk Bulatan Songsang Menggunakan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!