css3

来源：互联网发布：linux执行sh脚本编辑：程序博客网时间：2024/04/19 21:11

1.inline-block

支持IE8以上、Safari、Chrome、Opera、Firefox主流浏览器

这里写图片描述

html：

<div>    <div class="inlineblock">inline-block类型</div>    <div class="inlineblock">inline-block类型</div></div><div>    <div class="inline">inline类型</div>    <div class="inline">inline类型</div></div>

图一默认 css：

<style>    div.inlineblock {display: inline-block;      background-color: pink;    }    div.inline {      display: inline;      background-color: red;    }</style>

图二分别设置宽度 css：

<style>    div.inlineblock {      display: inline-block;      background-color: pink;      width: 300px;/*给inline-block类型设置宽度*/    }    div.inline {      display: inline;      background-color: red;      width: 300px;/*给inline类型设置宽度*/    }</style>

解析：inline-block类型可以设置宽度，在一行中并列显示多个block类型元素时使用inline-block类型能使样式变得简单。
一般inline-block类型垂直对齐的方式是底部对齐，如果想改成顶部对齐，则添加vertical-align: top;
如果想让两个div元素中间没有缝隙则去除代码中两个div元素之间的换行符，即让第一个div的结束标签链接第二个div的开始标签。如下图：

这里写图片描述

html:

<div>    <div class="inlineblock">inline-block类型</div><div class="inlineblock">inline-block类型</div>  </div>

2.inline-table类型

因为tabel表格是属于block类型，所以会单独占一行；只要给tabel添加样式：display:inline-table;就可以让文字和表格在一行显示。如图一：

这里写图片描述

html：

<body>  你好  <table>    <tr>      <td>单元格A</td>      <td>单元格B</td>      <td>单元格C</td>    </tr>    <tr>      <td>单元格D</td>      <td>单元格E</td>      <td></td>    </tr>  </table>  你好</body>

css：

<style>    table {      display: inline-table;      border:2px solid #ccc;    }    td {      border: 1px solid red;      padding: 5px;    }</style>

解析：（兼容IE8以上、主流浏览器）
图一是默认样式；图二是添加display: inline-table;让文字与表格在一行显示，默认是顶部对齐；可以通过vertical-align: bottom;设置底部对齐或者中间对齐，如图三；

3.盒阴影 box-shadow

兼容性：兼容Safari、Firefox；使用Safari时写成-webkit-box-shadow形式；使用Firefox时写成-moz-box-shadow形式；

这里写图片描述

html:

<div></div>

css：

div {     width: 100px;     height: 100px;     background-color: pink;     box-shadow: 10px 10px 10px gray;     -webkit-box-shadow: 10px 10px 10px gray;/*兼容Safari*/     -moz-box-shadow: 10px 10px 10px gray;/*兼容Firefox*/}

解析：box-shadow：阴影离开文字的横向距离、阴影离开文字的纵向距离、阴影的模糊半径、阴影的颜色；
图二将阴影的模糊半径设为0；
图三将横向距离、纵向距离均设为0；

4.对盒子内元素使用阴影

这里写图片描述

html：

<div>    我是内容我是内容<span>我是加阴影的元素</span>我是内容我是内容    </div>

css：

<style>      span {      background-color: pink;      box-shadow: 10px 10px 0 gray;          -moz-box-shadow: 10px 10px 10px gray;/*兼容Firefox*/    }    span{      background-color: pink;      box-shadow: 10px 10px 0 gray;      -webkit-box-shadow: 10px 10px 10px gray;/*兼容Safari*/    }</style>

5.对表格使用阴影

这里写图片描述

html：

<table>    <tr>      <td>单元A</td>      <td>单元B</td>      <td>单元C</td>    </tr>    <tr>      <td>单元D</td>      <td>单元E</td>      <td></td>    </tr></table>

css：

<style>    table {      border-spacing: 10px;/*单元格和单元格之间的距离*/      -webkit-box-shadow: 5px 5px 10px gray;/*兼容Safari*/      -moz-box-shadow: 5px 5px 10px gray;/*兼容Firefox*/    }    td {      background-color: #ffaa00;      -webkit-box-shadow: 5px 5px 5px gray;/*兼容Safari*/      -moz-box-shadow: 5px 5px 5px gray;/*兼容Firefox*/      padding:4px;    }</style>

解析：使得表格看起来有面板的视觉效果。

0 0