HTML / CSS仅适用于第一个和最后一个目标

时间:2015-04-09 07:05:10

标签: html css

以下html / css在第一个和最后一个上正常工作"她非常爱他。"为什么它不会在整个句子周围绘制圆形矩形进行3,4,5次迭代。

http://jsfiddle.net/xa3apsdc/16/

注意这段代码:

span[class]:before {
    width:100%;
    text-align:center;
    float:right;
    font:bold 10px arial;
    color:#00f;
    content: attr(class) "";
}

2 个答案:

答案 0 :(得分:2)

因为您没有使用,请添加此jsFiddle

span{
border:1px solid black;
border-radius:15px;
padding:2px;
}

答案 1 :(得分:2)

请尝试以下操作: Demo

CSS:

span{
    text-align:center;
    display:inline-block;
      border:1px solid black;
    border-radius:15px;
    padding:2px;
}

您只为第一个和最后一个孩子提供了圆角。这就是为什么它不起作用