14-01
19

学习笔记(一)

新年新气象,我打算在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    ×
评论: 0 | 查看次数: 3425
文章来自: 泡泡熊·BLOG
引用通告地址: 查看引用地址
Tags: 学习笔记
相关日志:
Add Comment
Name *
Password 游客不需密码,但建议您 注册帐号