生活随笔
收集整理的這篇文章主要介紹了
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文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
