• 欢迎加“百元导航”为主页,windows8风格,0.3s极速加载
  • 王柏元的博客专用搜索引擎:极客人,就用“极客搜”!
  •    2年前 (2014-12-06)  算法语言 |   4 条评论  70 
    文章评分 0 次,平均分 0.0

    border-radius向元素添加圆角边框,css3中的。IE9+ chrome safari5+ firefox4+ 现在都支持。可以向input div等设置边框。与border相似,可以四个角一起设置,也可以单独设置。

    1.圆角效果

    效果演示:

    css3圆角边框和边框阴影示例——王柏元的博客

    语法:

    代码如下:

    按top-left, top-right, bottom-right, bottom-left顺序设置每个 radius 的值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

    例子1:

    代码如下:

    等价于:

    代码如下:

    例子2:

    代码如下:

    等价于:

    代码如下:

     2.阴影效果

    效果演示:

    css3圆角边框和边框阴影示例——王柏元的博客

    box-shadow向框添加一个或多个阴影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

    语法:

    代码如下:

    h-shadow,v-shadow必须。水平,垂直阴影的位置。允许赋值。blur可选,模糊距离。spread可选,阴影的尺寸。color可选,阴影的颜色。inset可选,将外部阴影(outset)改为内部阴影。

    例子:

    代码如下:

      
     

    王柏元的博客著作权保留,转载请注明出处http://wangbaiyuan.cn/css3-rounded-corners-and-shadow-border-example.html,如果你觉得这篇文章对你有用,可以点击下面的“赞助作者”打赏作者!

    关于
    记录生活,镌刻心路;泼洒文墨,分享技术!王柏元的博客致力于IT经验交流,并原创翻译引进外文文章,打开IT国际化视野

    发表评论

    格式
    1. 大神能否发点文学性的东西?

      评论达人 LV.3 2年前 (2014-12-14) [0] [0]
    2. 这是什么语言

      向某某 评论达人 LV.3 2年前 (2014-12-13) [0] [0]

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册