CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示

css 3文本居中显示、圆形圆角绘制及立体阴影效果设置的示例展示① 文本居中显示② 圆角设置③ 圆形设置④ 立体阴影效果设置 推荐阅读 快速掌握Linux基础命令的一篇文章 示例展示① 文本居中显示通过div层设置 来控制文本在水平方向居中，再通过 来调整文本在垂直方向居中，数值可根据文本大小进行微调，一般略低于50%。 代码如下： 立即学习 “ 前端免费学习笔记（深入） ”； 代码语言：javascript代码运行次数：0 运行 复制```javascript 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 css3演示 圆角 div {/* 文本显示在横向中间 */text-align: center;/* 设置字体 */font-family: 微软雅黑;/* 宽度和长度 */width: 400px;height: 400px;/* 位置： 相对定位 */position:relative; top:100px;left:100px;/* 轮廓线，solid表示实心线 */border: 1px solid;/* 背景颜色 */background-color: rgb(167, 231, 17);}p {/* 文本显示在纵向中间，大概为50%减去字体的一半长度 */margin-top: 48%;} ``` ② 圆角设置通过div的 来设置圆角，数值表示圆角的半径大小。 可以分别设置四个角的半径，例如 的效果展示如下。 代码如下： 代码语言：javascript代码运行次数：0 运行 复制```javascript css3演示 圆角 div {/* 圆角，大小为正方形边长一半时为圆形 */border-radius: 20px;/* 文本显示在横向中间 */text-align: center;/* 设置字体 */font-family: 微软雅黑;/* 宽度和长度 */width: 400px;height: 400px;/* 位置：相对定位 */position:relative; top:100px;left:100px;/* 轮廓线，solid表示实心线 */border: 1px solid;/* 背景颜色 */background-color: rgb(167, 231, 17);}p {/* 文本显示在纵向中间，大概为50%减去字体的一半长度 */margin-top: 48%;} ``` ③ 圆形设置通过div的 设置圆角为正方形边长的一半时即可显示为圆形。 代码如下： 代码语言：javascript代码运行次数：0 运行 复制```javascript css3演示 圆角 div {/* 圆角，大小为正方形边长一半时为圆形 */border-radius: 200px;/* 文本显示在横向中间 */text-align: center;/* 设置字体 */font-family: 微软雅黑;/* 宽度和长度 */width: 400px;height: 400px;/* 位置：相对定位 */position:relative; top:100px;left:100px;/* 轮廓线，solid表示实心线 */border: 1px solid;/* 背景颜色 */background-color: rgb(167, 231, 17);}p {/* 文本显示在纵向中间，大概为50%减去字体的一半长度 */margin-top: 48%;} ``` ④ 立体阴影效果设置通过div的 来设置立体阴影效果。前两个值表示阴影相对于图形的水平和垂直偏移量，第三个值表示阴影的模糊半径，数值越大阴影越发散。 设置为 的效果展示如下，阴影角度和背景发散度有所变化，边框也调整为2px。 代码如下： 代码语言：javascript代码运行次数：0 运行 复制```javascript css3演示 圆角 div {/* 阴影设置 */box-shadow: 30px 30px 5px #888888;/* 圆角，大小为正方形边长一半时为圆形 */border-radius: 20px;/* 文本显示在横向中间 */text-align: center;/* 设置字体 */font-family: 微软雅黑;/* 宽度和长度 */width: 400px;height: 400px;/* 位置：相对定位 */position:relative; top:100px;left:100px;/* 轮廓线，solid表示实心线 */border: 1px solid;/* 背景颜色 */background-color: rgb(167, 231, 17);}p {/* 文本显示在纵向中间，大概为50%减去字体的一半长度 */margin-top: 48%;} ```