下面是小例子
样式部分：
div.container{
width: 200px
height: 150px
background: blue
position: relative
}
div.container>span{
display: inline-block
width: 50px
height: 50px
text-align: center
line-height: 50px
color: #FFFFFF
border: 5px solid #FFFFFF
border-radius: 50%
font-size: 30px
font-weight: bold
position: absolute
left: calc(50% - 25px)
top: calc(50% - 25px)
transform: rotate(-30deg)
-webkit-transform: rotate(-30deg)
-ms-transform: rotate(-30deg)
}
html部分:
<div class="container">
<span style="">李</span>
</div>
其实很简单啊，通过css 的background: linear-gradient() 就可以实现了，最后一个其实也是可以实现的，先写一个从上到下的重复线性渐变，然后再写一个从做到右的重复线性渐变，第二个颜色设置透明，然后通过定位在一起就可以实现了。都是一些比较简单的效果。相对与其他css标签，div和span对于它们包含的元素是没有意义的。例如当你看到<h1></h1>标签，你知道里面是标题，当你看到<p></p>标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样的意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而span是行级元素(行内标签)，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会。
