day07 下拉菜单 + 定位宽度继承 + shadow阴影 + text-overflow

1 实现一个下拉菜单

运用知识点float,position

//HTML

//CSS

2 再说width的继承问题

给父级相对定位,子级绝对定位,子级不会继承父元素的宽度

3 元素效果

3.1 给元素添加阴影
box-shadow: h-shadow | v-shadow | blur | spread | color | inset;

*h-shadow*
必需 水平阴影的位置。允许负值。
*v-shadow*
必需。垂直阴影的位置。允许负值。
*blur*
可选。模糊距离。
*spread*
可选。阴影的尺寸。
*color*
可选。阴影的颜色。请参阅 CSS 颜色值。
inset
可选。将外部阴影 (outset) 改为内部阴影

3.2 文字效果
text-shadow: h-shadow | v-shadow | blur | color;

*h-shadow*
必需 水平阴影的位置。允许负值。
*v-shadow*
必需。垂直阴影的位置。允许负值。
*blur*
可选。模糊距离。
*color*
可选。阴影的颜色。请参阅 CSS 颜色值。

3.3 文本溢出属性指定如何显示溢出内容
text-overflow

//CSS

//HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis facere id, nisi nulla quam tempora voluptates voluptatum! Amet animi cumque doloremque error inventore necessitatibus porro quam recusandae unde!

你可能感兴趣的:(day07 下拉菜单 + 定位宽度继承 + shadow阴影 + text-overflow)