注意： 行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。 但是转换为块级 和 行内块元素就可以了。
盒子阴影
box-shadow : h-shadow v-shadow blur spread color inset;
h-shadow 必需 水平阴影的位置， 允许负值
v-shadow 必需 垂直阴影的位置， 允许负值
blur 可选 模糊距离
spread 可选 阴影的尺寸
color 可选 阴影的颜色 请参阅CSS颜色值
inset 可选 将外部阴影 outset 改为内部阴影
默认的是外阴影outset， 但是不可以写这个单词， 否则导致阴影无效
盒子阴影不占用空间， 不会影响其他盒子排列
- <style>
- div {
- width: 200px;
- height: 200px
- background-color: pink
- margin: 100px auto;
- }
- div:hover {
- box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
- }
- style>
- <body>
- <div>div>
- body>
在 CSS3 中， 我们可以使用 text-shadow 属性将阴影应用于文本
text-shadow: h-shadow v-shadow blur color
h-shadow 必需 水平阴影的位置， 允许负值
v-shadow 必需 垂直阴影的位置， 允许负值
blur 可选 模糊距离
color 可选 阴影的颜色 请参阅CSS颜色值