Edit in JSFiddle

<div id="first" class="square">
  <div class="circle small">
  </div>
</div>

<div id="second" class="circle">
   <div class="square small">
   </div>
</div>

/* 我是CSS的注释，注释里面写啥都行 */
/* CSS样式有很多，请到http://www.w3school.com.cn/css/index.asp进行进一步的阅读 */

/* 可以对所有div标签定义样式 */
div {
  /* CSS语句的格式是 <style_name>: <property_1> <property_2> ... <property_n>; */
  /* 每个style可以有多个property，用空格隔开，每行必须要以分号结束 */
  border: 1px solid black;
  width: 100px;
  height: 100px;
}

/* 如果是指代id的话前面带个# */
#first {
  background-color: rgba(255, 255, 0, 0.25);
}

#second {
  background-color: rgba(0, 255, 255, 0.25);
}

/* 如果是指代class的话前面带个小句号. */
.circle {
  border-radius: 100%;
}

.square {
  border-radius: 0;
}

/* 这里的高度宽度设定和div的设定重复。重复的定义以Specificity较高的占优 */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity */
/* 这里class定义比直接标签定义更Specific，所以优先考虑这里的高度和宽度 */
.small {
  height: 50px;
  width: 50px;
  z-index: 1;
  background-image: url('http://lhr0909.github.io/img/doge.jpg');
  background-size: 50px 50px;
  background-repeat: no-repeat;
}