css 多出的内容省略号

在使用CSS样式表的过程中，我们可能会遇到一些省略号，这些省略号在CSS中有不同的作用，下面我们来逐一讲解。

首先是text-overflow属性，它可以用来控制文本溢出时的显示方式。默认情况下，文本溢出会自动换行，但是我们可以设置text-overflow为ellipsis，这样就会在文本溢出处显示省略号。例如：

p{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

上面的代码可以使得p标签内的文本在一行内显示，溢出部分用省略号代替。

接下来是border-radius属性，它可以用来设置元素的圆角大小。如果我们只设置了部分角的圆角大小，则未设置的角会自动使用默认值0，这意味着元素会成为一个不规则的图形。例如：

div{
      border-radius: 10px 20px;
}

上面的代码可以使得div元素的上左角圆角为10px，下右角圆角为20px。

最后是box-shadow属性，它可以用来为元素添加阴影效果。可以使用inset关键字来设置内阴影，也可以设置多重阴影。此外，如果只设置水平和垂直偏移量，则颜色和模糊半径会自动使用默认值。例如：

button{
      box-shadow: 2px 2px 5px #999;
}
div{
      box-shadow: inset 0 0 10px #666, 0 0 5px #333;
}
    

上面的代码可以为button添加一个右下方5像素的阴影，为div添加一个内部黑色阴影和一个外部灰色阴影。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！