zoukankan      html  css  js  c++  java
  • css3のborder-radius

    css3のborder-radius

    今天主要练习了一下border-radius这个属性,这个是最常用的属性,所以先从它开始学习和总结吧。

    我觉得需要注意以下几点:

    1.书写规范:

    -webkit-border-radius-top-left 其中top left是分开写的用-来连接,而-moz-border-radius-topleft 这个topleft是连在一起写的,不要记混了。

    2.简写方式:

    border-radius:2em;不用多说了

    border-radius:2em 3em;是指左上角=右下角=2em 右上角=左下角=3em

    border-radius:2em 3em 4em;左上角=2em 右上角=3em 右下角=4em 左下角=3em

    border-radius:2em 3em 4em 5em;遵循顺时针原则。。

    3.特别要注意这个:水平半径≠垂直半径

    border-radius:10em/5em;

    水平半径:10em 垂直半径:5em;

    我是怎么注意到这个的呢,说起来很有意思,第一开始,接触到border-radius,我就试着写,然后测试,代码如下:

    css

     

    1 .exg {
    2         border-radius:5em 10em;
    3         -moz-border-radius:5em 10em;
    4         -webkit-border-radius:5em 10em;
    5     }

     

    html

    <div class="exg wrap"></div>

    结果发现谷歌的显示竟然和其他浏览器都不一样,当时就特别差异,然后我就顺藤摸瓜,最终明白了,原来是这个样子。很有意思,截图看下:

    谷歌的:

    火狐的:

    好了,其他的大概没有了吧,那么就看看下面这个网页吧,请大家鉴赏下,亲~给好评哦!

     

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4     <meta charset=utf-8>
      5     <title>border-redius</title>
      6     <style type="text/css">
      7     .wrap {
      8         color: #fff;
      9         font-family: Arial;
     10         border: 1px solid #dfdfdf;
     11         padding: 10px 12em;
     12         background: #bbb;
     13         margin-bottom: 10px;
     14     }
     15     h2 {
     16         font-size: 14px;
     17         font-weight: bold;
     18         line-height: 24px;
     19     }
     20     /*水平与垂直半径相等*/
     21     .exg_1 {
     22         border-radius: 5em;
     23         -moz-border-radius:5em;
     24         -webkit-border-radius:5em;
     25     }
     26     .exg_2 {
     27         border-radius: 5em 10em;
     28         -moz-border-radius-topleft:5em;
     29         -moz-border-radius-topright:10em;
     30         -moz-border-radius-bottomright:10em;
     31         -moz-border-radius-bottomleft:5em;
     32         -webkit-border-radius-top-left:5em;
     33         -webkit-border-radius-top-right:10em;
     34         -webkit-border-radius-bottom-right:10em;
     35         -webkit-border-radius-bottom-left:5em;
     36     }
     37     .exg_3 {
     38         border-radius: 10em 20em 30em;
     39         -moz-border-radius-topleft:10em;
     40         -moz-border-radius-topright:20em;
     41         -moz-border-radius-bottomright:30em;
     42         -moz-border-radius-bottomleft:20em;
     43         -webkit-border-radius-top-left:10em;
     44         -webkit-border-radius-top-right:20em;
     45         -webkit-border-radius-bottom-right:30em;
     46         -webkit-border-radius-bottom-left:20em;
     47     }
     48     .exg_4 {
     49         border-radius: 10em 20em 30em 40em;
     50         -moz-border-radius-topleft:10em;
     51         -moz-border-radius-topright:20em;
     52         -moz-border-radius-bottomright:40em;
     53         -moz-border-radius-bottomleft:30em;
     54         -webkit-border-radius-top-left:10em;
     55         -webkit-border-radius-top-right:20em;
     56         -webkit-border-radius-bottom-right:40em;
     57         -webkit-border-radius-bottom-left:30em;
     58     }
     59     /*水平与垂直半径不等*/
     60     .exg_01 {
     61         border-radius: 10em/5em;
     62         -moz-border-radius:10em/5em;
     63         -webkit-border-radius:10em/5em;
     64     }
     65     .exg_02 {
     66         border-radius: 10em 20em/5em 10em;
     67         -moz-border-radius-topleft:10em/5em;
     68         -moz-border-radius-topright:20em/10em;
     69         -moz-border-radius-bottomright:10em/5em;
     70         -moz-border-radius-bottomleft:20em/10em;
     71         -webkit-border-radius-top-left:10em/5em;
     72         -webkit-border-radius-top-right:20em/5em;
     73         -webkit-border-radius-bottom-right:10em/5em;
     74         -webkit-border-radius-bottom-left:20em/5em;
     75     }
     76     .exg_03 {
     77         border-radius: 10em 20em 30em/5em 10em 15em;
     78         -moz-border-radius-topleft:10em/5em;
     79         -moz-border-radius-topright:20em/10em;
     80         -moz-border-radius-bottomright:30em/15em;
     81         -moz-border-radius-bottomleft:20em/10em;
     82         -webkit-border-radius-top-left:10em/5em;
     83         -webkit-border-radius-top-right:20em/10em;
     84         -webkit-border-radius-bottom-right:30em/15em;
     85         -webkit-border-radius-bottom-left:20em/10em;
     86     }
     87     .exg_04 {
     88         border-radius: 10em 20em 30em 40em/5em 10em 15em 20em;
     89         -moz-border-radius-topleft:10em/5em;
     90         -moz-border-radius-topright:20em/10em;
     91         -moz-border-radius-bottomright:30em/15em;
     92         -moz-border-radius-bottomleft:40em/20em;
     93     }
     94     h3 {
     95         font-family: Arial;
     96         font-size: 14px;
     97         line-height: 24px;
     98     }
     99     ul {
    100         font-family: Arial;
    101         font-size: 14px;
    102         background: #bbb;
    103         line-height: 24px;
    104         color: #ffffff;
    105         padding:10px 40px; 
    106     }
    107     p {
    108         font-family: Arial;
    109         text-indent: 24px;
    110         line-height: 24px;
    111         margin: 0;
    112         padding:0; 
    113     }
    114     .exg {
    115         padding:5em; 
    116         border-radius:5em 10em;
    117         -moz-border-radius:5em 10em;
    118         -webkit-border-radius:5em 10em;
    119     }
    120     </style>
    121 
    122 </head>
    123 <body>
    124     <div class="exg wrap"></div>
    125     <h2>水平与垂直半径相同</h2>
    126 <!-- border-radius 一般写法圆角设置相同 -->
    127     <div class="exg_1 wrap">
    128         <h2>提供1个参数</h2>
    129         <p>.exg_1 {</p>
    130         <p>border-radius: 5em;</p>
    131         <p>-moz-border-radius:5em;</p>
    132         <p>-webkit-border-radius:5em;</p>
    133         <p>}</p>    
    134     </div>
    135     <div class="exg_2 wrap">
    136         <h2>提供两个参数即:border-radius:5em 20em 5em 20em</h2>
    137         <p>.exg_2 {</p>
    138         <p>border-radius: 5em 10em;</p>
    139         <p>-moz-border-radius-topleft:5em;</p>
    140         <p>-moz-border-radius-topright:10em;</p>
    141         <p>-moz-border-radius-bottomright:10em;</p>
    142         <p>-moz-border-radius-bottomleft:5em;</p>
    143         <p>-webkit-border-radius-top-left:5em;</p>
    144         <p>-webkit-border-radius-top-right:10em;</p>
    145         <p>-webkit-border-radius-bottom-right:10em;</p>        
    146         <p>-webkit-border-radius-bottom-left:5em;</p>
    147         <p>}</p>
    148     </div>
    149     <div class="exg_3 wrap">
    150         <h2>提供三个参数即:border-radius:10em 20em 30em 20em;</h2>
    151         <p>.exg_3 {</p>
    152         <p>border-radius: 10em 20em 30em;</p>
    153         <p>-moz-border-radius-topleft:10em;</p>
    154         <p>-moz-border-radius-topright:20em;</p>
    155         <p>-moz-border-radius-bottomright:30em;</p>
    156         <p>-moz-border-radius-bottomleft:20em;</p>
    157         <p>-webkit-border-radius-top-left:10em;</p>
    158         <p>-webkit-border-radius-top-right:20em;</p>
    159         <p>-webkit-border-radius-bottom-right:30em;</p>
    160         <p>-webkit-border-radius-bottom-left:20em;</p>
    161         <p>}</p>
    162         <p>}</p>
    163     </div>
    164     <div class="exg_4 wrap">
    165         <h2>提供四个参数</h2>
    166         <p>.exg_4 {</p>
    167         <p>border-radius: 10em 20em 30em 40em;</p>
    168         <p>-moz-border-radius-topleft:10em;</p>
    169         <p>-moz-border-radius-topright:20em;</p>
    170         <p>-moz-border-radius-bottomright:40em;</p>
    171         <p>-moz-border-radius-bottomleft:30em;</p>
    172         <p>-webkit-border-radius-top-left:10em;</p>
    173         <p>-webkit-border-radius-top-right:20em;</p>
    174         <p>-webkit-border-radius-bottom-right:40em;</p>
    175         <p>-webkit-border-radius-bottom-left:30em;</p>
    176         <p>}</p>
    177     </div>
    178     <h2>水平与垂直半径不等</h2>
    179     <div class="exg_01 wrap">
    180         <h2>提供1个参数:水平半径/垂直半径</h2>
    181         <p>.exg_1 {</p>
    182         <p>border-radius: 10em/5em;</p>
    183         <p>-moz-border-radius:10em/5em;</p>
    184         <p>-webkit-border-radius:10em/5em;</p>
    185         <p>}</p>        
    186     </div>
    187     <div class="exg_02 wrap">
    188         <h2>提供两个参数即:border-radius:10em 20em 10em 20em/5em 10em 5em 10em</h2>
    189         <p>.exg_2 {</p>
    190         <p>border-radius: 10em 20em;</p>
    191         <p>-moz-border-radius-topleft:10em/5em;</p>
    192         <p>-moz-border-radius-topright:20em/10em;</p>
    193         <p>-moz-border-radius-bottomright:10em/5em;</p>
    194         <p>-moz-border-radius-bottomleft:20em/10em;</p>
    195         <p>-webkit-border-radius-top-left:10em/5em;</p>
    196         <p>-webkit-border-radius-top-right:20em/10em;</p>
    197         <p>-webkit-border-radius-bottom-right:10em/5em;</p>        
    198         <p>-webkit-border-radius-bottom-left:20em/10em;</p>
    199         <p>}</p>
    200     </div>
    201     <div class="exg_03 wrap">
    202         <h2>提供三个参数即:border-radius:10em 20em 30em 20em/5em 10em 15em 10em;</h2>
    203         <p>.exg_3 {</p>
    204         <p>border-radius: 10em 20em 30em/5em 10em 15em;</p>
    205         <p>-moz-border-radius-topleft:10em/5em;</p>
    206         <p>-moz-border-radius-topright:20em/10em;</p>
    207         <p>-moz-border-radius-bottomright:30em/15em;</p>
    208         <p>-moz-border-radius-bottomleft:20em/10em;</p>
    209         <p>-webkit-border-radius-top-left:10em/5em;</p>
    210         <p>-webkit-border-radius-top-right:20em/10em;</p>
    211         <p>-webkit-border-radius-bottom-right:30em/15em;</p>
    212         <p>-webkit-border-radius-bottom-left:20em/10em;</p>
    213         <p>}</p>
    214         <p>}</p>
    215     </div>
    216     <div class="exg_04 wrap">
    217         <h2>提供四个参数</h2>
    218         <p>.exg_4 {</p>
    219         <p>border-radius: 10em 20em 30em 40em/5em 10em 15em 20em;</p>
    220         <p>-moz-border-radius-topleft:10em/5em;</p>
    221         <p>-moz-border-radius-topright:20em/10em;</p>
    222         <p>-moz-border-radius-bottomright:40em/20em;</p>
    223         <p>-moz-border-radius-bottomleft:30em/15em;</p>
    224         <p>-webkit-border-radius-top-left:10em/5em;</p>
    225         <p>-webkit-border-radius-top-right:20em/10em;</p>
    226         <p>-webkit-border-radius-bottom-right:40em/20em;</p>
    227         <p>-webkit-border-radius-bottom-left:30em/15em;</p>
    228         <p>}</p>
    229     </div>
    230     <div class="border_radius_message">
    231         <ul>
    232             <li>border-radius:长度</li>
    233             <li>Firefox支持border-radius(圆角):-moz-border-radius:2px;</li>
    234             <li>webkit内核的Safari和Chrome支持border-radius(圆角):-webkit-border-radius:2px;</li>
    235             <li>Opera支持border-radius(圆角):box-shadow:2px;</li>
    236             <li>IE不支持Box Shadow(阴影)</li>
    237         </ul>
    238         <h3>我们还可以随意指定圆角的位置,左上、左下、右上、右下四个方向。在firefox、webkit内核的Safari和Chrome和opera(css3)、中的具体书写格式如下:</h3>
    239         <ul>
    240             <li>-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius</li>
    241             <li>-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius</li>
    242             <li>-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius</li>
    243             <li>-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius</li>
    244         </ul>
    245         <h3>border-radius(圆角)还有其他一些用法,Firefox、webkit内核的Safari和Chrome和opera(css3)其他写法有些略微的差异,具体可以查看以下网址: </h3>
    246         <p>
    247             <a href="https://developer.mozilla.org/en/CSS:-moz-border-radius" target="_blank">https://developer.mozilla.org/en/CSS:-moz-border-radius</a>
    248         </p>
    249         <p>
    250             <a href="http://www.the-art-of-web.com/css/border-radius/" target="_blank">http://www.the-art-of-web.com/css/border-radius/</a>
    251         </p>
    252         <p>
    253             <a href="http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/" target="_blank">http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/</a>
    254         </p>
    255     </div>
    256 
    257 
    258 </body>
    259 </html>
    View Code

    欢迎大家补充,不足之处,请大家不吝指点,小女子在此有礼了~

  • 相关阅读:
    PAT (Advanced Level) Practice 1055 The World's Richest (25 分) (结构体排序)
    PAT (Advanced Level) Practice 1036 Boys vs Girls (25 分)
    PAT (Advanced Level) Practice 1028 List Sorting (25 分) (自定义排序)
    PAT (Advanced Level) Practice 1035 Password (20 分)
    PAT (Advanced Level) Practice 1019 General Palindromic Number (20 分) (进制转换,回文数)
    PAT (Advanced Level) Practice 1120 Friend Numbers (20 分) (set)
    从零开始吧
    Python GUI编程(TKinter)(简易计算器)
    PAT 基础编程题目集 6-7 统计某类完全平方数 (20 分)
    PAT (Advanced Level) Practice 1152 Google Recruitment (20 分)
  • 原文地址:https://www.cnblogs.com/jessiecaisme/p/3171634.html
Copyright © 2011-2022 走看看