元素隐藏、盒子阴影、溢出隐藏

最新推荐文章于 2024-08-10 12:02:24 发布

信息技术姜老师

最新推荐文章于 2024-08-10 12:02:24 发布

阅读量360

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_56358827/article/details/127460934

版权

一、控制元素隐藏

visibility：none；元素被隐藏保留空间位
display: none;元素被隐藏不保留空间位

二、盒子阴影：box-shadow

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

//若要对同一个元素添加多个阴影效果，请使用逗号将每个阴影规则分隔开。

三、overflow溢出隐藏

overflow：scroll //添加滚动条

overflow：hidden //溢出隐藏

overflow：auto  //溢出添加滚动条 否则不添加

文本溢出添加... 实现代码如下：

{
overflow：hidden;
white-space：nowrap;//不换行
text-overflow: ellipsis;
}

text-overflow参数值和解释：
clip : 　不显示省略标记（...），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（...）