css3文本居中显示、圆形圆角绘制及立体阴影效果设置的示例展示① 文本居中显示② 圆角设置③ 圆形设置④ 立体阴影效果设置
推荐阅读
快速掌握Linux基础命令的一篇文章
示例展示① 文本居中显示通过div层设置text-align: center;来控制文本在水平方向居中，再通过margin-top: 48%;来调整文本在垂直方向居中，数值可根据文本大小进行微调，一般略低于50%。
代码如下：
立即学习“前端免费学习笔记（深入）”；
代码语言：javascript代码运行次数：0运行复制“`javascript
芦笋演示
一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。
34 查看详情
圆角
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的border-radius: 20px;来设置圆角，数值表示圆角的半径大小。
可以分别设置四个角的半径，例如border-radius: 200px 100px 50px 10px;的效果展示如下。
代码如下：
代码语言：javascript代码运行次数：0运行复制“`javascript
圆角
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的border-radius: 200px;设置圆角为正方形边长的一半时即可显示为圆形。
代码如下：
代码语言：javascript代码运行次数：0运行复制“`javascript
圆角
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的box-shadow: 30px 30px 5px #888888来设置立体阴影效果。前两个值表示阴影相对于图形的水平和垂直偏移量，第三个值表示阴影的模糊半径，数值越大阴影越发散。
设置为box-shadow: -30px -30px 15px #888888;的效果展示如下，阴影角度和背景发散度有所变化，边框也调整为2px。
代码如下：
代码语言：javascript代码运行次数：0运行复制“`javascript
圆角
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%;}“`
以上就是CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/469532.html
微信扫一扫 
支付宝扫一扫 
