响应式网站设计（5）-部分css样式复习

川长思鸟来 2021-09-16 04:28 306阅读 0赞

**样式1：box-shadow**

**语法：box-shadow: h-shadow v-shadow blur spread color inset;**

box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong>值</strong></td> 
   <td><strong>描述</strong></td> 
  </tr> 
  <tr> 
   <td>h-shadow</td> 
   <td>必需。水平阴影的位置。允许负值。</td> 
  </tr> 
  <tr> 
   <td>v-shadow</td> 
   <td>必需。垂直阴影的位置。允许负值。</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>可选。模糊距离。</td> 
  </tr> 
  <tr> 
   <td>spread</td> 
   <td>可选。阴影的尺寸。</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>可选。阴影的颜色。请参阅 CSS 颜色值。</td> 
  </tr> 
  <tr> 
   <td>inset</td> 
   <td>可选。将外部阴影 (outset) 改为内部阴影。</td> 
  </tr> 
 </tbody> 
</table>

**样式2：background**

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>background-color</td> 
   <td>规定要使用的背景颜色。</td> 
  </tr> 
  <tr> 
   <td>background-position</td> 
   <td>规定背景图像的位置。</td> 
  </tr> 
  <tr> 
   <td>background-size</td> 
   <td>规定背景图片的尺寸。</td> 
  </tr> 
  <tr> 
   <td>background-repeat</td> 
   <td>规定如何重复背景图像。</td> 
  </tr> 
  <tr> 
   <td>background-origin&nbsp;</td> 
   <td>规定背景图片的定位区域。</td> 
  </tr> 
  <tr> 
   <td>background-clip</td> 
   <td>规定背景的绘制区域。</td> 
  </tr> 
  <tr> 
   <td>background-attachment&nbsp;</td> 
   <td>规定背景图像是否固定或者随着页面的其余部分滚动</td> 
  </tr> 
  <tr> 
   <td>background-image</td> 
   <td>规定要使用的背景图像。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承 background 属性的设置</td> 
  </tr> 
 </tbody> 
</table>

**样式3：文字不换行，超出后以省略号代替**

text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;