CSS 3 ??: "??" ?? "???? ?"

CSS?? ?? ?? ??? ?? ?? ??? ?????. ??? ??. ?? ??? ??? ???? ??? ? ??? ? ?? ???? ??? ??? ????.

?? ?? ? ?? ?? ?? ??

? ???? ? ?? ?? ??, ?? ?(#a)? ???? ?? ?? ??? ?? Z-???? ???? ?? ??(#b)? ???? ?? ? ?? ?????. ?? ???? CSS ??? ? ?? ??/?? ??? ?? ??? ?? ??? ??? ????.

?? ??:

<div>

.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;
}

??? ?? ????? ? ?? ?? ?? ??

? ?? ??? CSS3 ??? ?? ?????? ???? ?? ??? ?? ?? ?? ?? div? ???? ?? ??? ????. ?? ??. ? ??? CSS ??? ?????? ???? ????? ?????.

?? ??:

<div>

.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: /* radial-gradient syntax for various browsers */;
}

??? ??? ???? ???? ?? CSS?? ?? ?? ??? ?? ?? ? ?? ??? ??? ?????. ??? ??? ???? ???, ??? ?? ?? ? ??? ??? ?? ????.

? ??? CSS? ???? ?? ?? ??? ? ??? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!