学习笔记（一）

赵大宝

字体大小: 小中大

新年新气象，我打算在2014年里好好学点东西，俗话说的好：人在江湖片、艺多不压身（好像不押韵哎），在学习过程中肯定有些东西需要记住或者备查，所以建了页面用来记录这些东西，以备查。

1、CSS圆角

做处理图片的时候需要用圆角表现，但每次都要用PS生成圆角未免效率低下，之前记得CSS可以解决这个问题，但一直没有去应用，这次应用一下，发现效果很不错，写出来留作备查。

-moz(例如 -moz-border-radius)用于Firefox
-webkit(例如：-webkit-border-radius)用于Safari和Chrome。

程序代码

<div id="round"></div>
#round {
    padding:10px; width:300px; height:50px;
    border: 5px solid #dedede;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}

<div id="round"></div>
#round {
    padding:10px; width:300px; height:50px;
    background:#FC9;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius:15px;
}

支持上、右、下、左

程序代码

border-radius:5px 15px 20px 25px;

支持拆分书写

程序代码

/* Gecko browsers */
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 20px;

/* Webkit browsers */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 20px;

/* W3C syntax */
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 20px;

浏览器    支持性

Firefox(2、3+)    √
Google Chrome(1.0.154+…)    √
Google Chrome(2.0.156+…)    √
Safari(3.2.1+ windows)    √
Internet Explorer(IE7, IE8)    ×
Opera 9.6    ×

前一篇：盘点即将过去的2013年，这是成长的一年