生活随笔
收集整理的这篇文章主要介绍了
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置
- 实例演示
- ① 文本居中显示
- ② 圆角设置
- ③ 圆形设置
- ④ 立体阴影效果设置
[ 推荐文章 ]
一篇文章快速掌握 Linux 基本命令
实例演示
① 文本居中显示
通过 div 层的 text-align: center; 先控制文本在横向中间，再根据 margin-top: 48%; 即可控制文本显示在图形的竖向中间部位，值可以根据文本的大小来定位，大约略小于百分之 50%。
代码如下：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>css3演示
</title>
</head>
<body><div><p>圆角
</p></div>
</body>
</html><style>
div {text-align: center;font-family: 微软雅黑;width: 400px;height: 400px;position:relative;top:100px;left:100px;border: 1px solid;background-color: rgb(167, 231, 17);
}p {margin-top: 48%;
}
</style>
② 圆角设置
通过 div 的 border-radius: 20px; 可设置圆角，值为圆角的半径大小。
可以指定 4 个值，分别设置左上、右上、右下和左下 4 个圆角的半径大小。
设置 border-radius: 200px 100px 50px 10px; 效果展示。
代码如下：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>css3演示
</title>
</head>
<body><div><p>圆角
</p></div>
</body>
</html><style>
div {border-radius: 20px;text-align: center;font-family: 微软雅黑;width: 400px;height: 400px;position:relative;top:100px;left:100px;border: 1px solid;background-color: rgb(167, 231, 17);
}p {margin-top: 48%;
}
</style>
③ 圆形设置
通过 div 的 border-radius: 200px; 设置圆角为正方形边长一半时即可显示为圆形。
代码如下：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>css3演示
</title>
</head>
<body><div><p>圆角
</p></div>
</body>
</html><style>
div {border-radius: 200px;text-align: center;font-family: 微软雅黑;width: 400px;height: 400px;position:relative;top:100px;left:100px;border: 1px solid;background-color: rgb(167, 231, 17);
}p {margin-top: 48%;
}
</style>
④ 立体阴影效果设置
通过 div 的 box-shadow: 30px 30px 5px #888888 设置立体阴影效果。前 2 个值是相对图形上下偏移量，第三个值是视觉高度，越高的话阴影会越发散。
设置为 box-shadow: -30px -30px 15px #888888; 的效果，可以看到阴影角度变了，背景也发散了，border 也改成了 2px。
代码如下：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>css3演示
</title>
</head>
<body><div><p>圆角
</p></div>
</body>
</html><style>
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;border: 1px solid;background-color: rgb(167, 231, 17);
}p {margin-top: 48%;
}
</style>
喜欢的点个赞❤吧！
总结
以上是生活随笔为你收集整理的CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
