標題: 圆角背景 [打印本頁]
作者: rainbow 時間: 2018-9-2 20:07 標題: 圆角背景
本帖最後由 rainbow 於 2018-9-2 20:47 編輯
（此代码只在Chrome浏览器上才能显示圆角效果）
- <div align="center">
- <style type="text/css">
- div.圆角矩形 { width: 600px; height: 140px; background-color:#DDF3F8; border-radius: 30px; }
- </style>
- <div class="圆角矩形"><p align=center><span style="FONT: bold 60px/140% Microsoft YaHei; COLOR: #003399; letter-spacing:10px">圆角矩形背景</span><br><span style="FONT: bold 30px/140% kaiti; COLOR: #4169E1">学习运用css圆角代码</span></p></div></div>
作者: rainbow 時間: 2018-9-2 20:44
本帖最後由 rainbow 於 2018-9-2 20:50 編輯
（此代码只在Chrome浏览器上才能显示圆形背景效果）
- <div align="center">
- <style type="text/css">div.正圆轮廓 { width: 650px; height: 570px; margin:30px; background-color:#edb433; border: 10px double #cc0033; filter:alpha(opacity=100); opacity:0.6; border-radius: 50%; }
- </style>
- </span></p>
- <div class="正圆轮廓" style="padding-top:50px">
- <p align=center><img src="http://i.imgur.com/CeyUSWs.pngf" width=500></p>
- </div> </div>
作者: rainbow 時間: 2018-9-2 21:15
本帖最後由 rainbow 於 2021-6-4 19:07 編輯
（此代码只在Chrome浏览器上才能显示椭圆形背景效果）
- <div align="center">
- <style type="text/css">
- div.椭圆轮廓 { width: 600px; height: 200px; margin:10px; background-color:#DCF9EF; border: 10px double #005500; filter:alpha(opacity=100); opacity:0.9; border-radius: 50%; }
- </style>
- <div class="椭圆轮廓">
- <p style="padding:15px" align=center><img src="http://img1.oldkids.cn/upload/2021/06/04/blog_260776097_20210604185427577.gif" alt="blog_20160310070132658852.gif" style="width:531px; height:144px;" /></p>
- </div> </div><br><br>
圆角半径代码的说明：
border-radius: 30px;表示四个角的圆角半径相同，都是30px。
border-radius: 15px 5px;第一值为左上角和右下角圆角半径，第二值为右上角和左下角圆角半径。
border-radius: 15px 5px 25px;第一值为左上角圆角半径，第二值为右上角和左下角圆角半径，第三值为右下角圆角半径。
border-radius: 15px 5px 25px 10px;依次表示左上角，右上角。右下角，左下角圆角半径。
正圆形的圆角半径须设置为 50%（图形宽高要相等）。椭圆形的圆角半径亦须设置为 50%。
| 歡迎光臨 老校友 (http://boanson.orzweb.net/) |
Powered by Discuz! 7.2 |
新浪微博
QQ空间
人人网
腾讯微博
Facebook
Google+
Plurk
Twitter
Line