免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

圆角背景

本帖最後由 rainbow 於 2018-9-2 20:47 編輯

圆角矩形背景
学习运用css圆角代码

(此代码只在Chrome浏览器上才能显示圆角效果)

  1. <div align="center">
  2. <style type="text/css">
  3. div.圆角矩形 { width: 600px; height: 140px; background-color:#DDF3F8; border-radius: 30px; }
  4. </style>
  5. <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:50 編輯


(此代码只在Chrome浏览器上才能显示圆形背景效果)

  1. <div align="center">
  2. <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%; }
  3. </style>
  4. </span></p>
  5. <div class="正圆轮廓" style="padding-top:50px">
  6. <p align=center><img src="http://i.imgur.com/CeyUSWs.pngf" width=500></p>
  7. </div> </div>
複製代碼


TOP

本帖最後由 rainbow 於 2021-6-4 19:07 編輯

blog_20160310070132658852.gif


(此代码只在Chrome浏览器上才能显示椭圆形背景效果)

  1. <div align="center">
  2. <style type="text/css">
  3. div.椭圆轮廓 { width: 600px; height: 200px; margin:10px; background-color:#DCF9EF; border: 10px double #005500; filter:alpha(opacity=100); opacity:0.9; border-radius: 50%; }
  4. </style>
  5. <div class="椭圆轮廓">
  6. <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>
  7. </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%。



TOP

返回列表