Bagaimanakah saya boleh mencipta kesan 'bulatan songsang' atau 'potong bulatan' menggunakan CSS3?-tutorial css-php.cn

Bagaimanakah saya boleh mencipta kesan 'bulatan songsang' atau 'potong bulatan' menggunakan CSS3?

Barbara Streisand

Lepaskan： 2024-12-06 04:46:10

asal

1059 orang telah melayarinya

How can I create an

Bentuk CSS 3: "Bulatan Songsang" atau "Bulatan Potong"

Mencipta bentuk yang menyerupai "bulatan songsang" atau " potong bulatan" dalam CSS ialah cabaran reka bentuk biasa. Berikut ialah pecahan cara untuk mencapai kesan ini menggunakan teknik CSS 3:

Kemas kini: Pilihan Kecerunan Latar Belakang Jejari CSS3

Untuk penyemak imbas yang menyokong kecerunan latar belakang jejari CSS3 (cth., Firefox , Chrome), "jurang" telus boleh dibuat antara bulatan dan songsangnya potongan:

HTML:

<div>

Salin selepas log masuk

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;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: -moz-radial-gradient(
    -23px 50%,
    circle closest-corner,
    transparent 0,
    transparent 55px,
    black 56px,
    grey 57px
  );
}

Salin selepas log masuk

Jawapan Asal:

Menggunakan pengindeksan z dan kedudukan, kesan "bulatan songsang" yang bersih boleh dicapai:

HTML:

<div>

Salin selepas log masuk

CSS:

.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;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  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 kaedah menghasilkan visual yang menarik " kesan bulatan songsang" tanpa memerlukan imej.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta kesan 'bulatan songsang' atau 'potong bulatan' menggunakan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!