<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8"> </head> <body> <div class="ui inverted red circular segment"> <div class="ui circular segment"> <div class="ui inverted red circular segment"> <i class="circular inverted blue big star icon"></i> </div> </div> </div> </body> </html>
新用到的semantic样式源码：
i.circular.icon {
border-radius: 500em !important;
line-height: 1 !important;
padding: 0.5em 0.5em !important;
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
2em !important;
height: 2em !important;
}
i.circular.inverted.icon {
border: none;
box-shadow: none;
}
i.inverted.circular.icon {
background-color: #1b1c1d !important;
color: #ffffff !important;
}
.ui.circular.segment {
display: table-cell; //表格单元格
padding: 2em;
text-align: center;
vertical-align: middle;
border-radius: 500em;
}