| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1004 人关注过本帖
标题:认识CSS3—更容易的网页细节border-radius属性
只看楼主 加入收藏
elsyyzh
Rank: 1
来 自:湖北黄冈
等 级:新手上路
帖 子:29
专家分:0
注 册:2015-11-9
结帖率:0
收藏
 问题点数:0 回复次数:0 
认识CSS3—更容易的网页细节border-radius属性
border-radius属性
这个属性在CSS3里用来创建圆角,它的值类似于padding和margin的写法
boder-radius:一个值表示四个角
<style>
.box{ width:300px;
      height:100px;
      background:#FC9;
      border-radius:30px;}
h{padding:60px;}
</style>

boder-radius:两个值,前面一个值控制左上和右下的圆角,后面一个控制右上和左下的圆角
<style>
.box{ width:300px;
      height:100px;
      background:#FC9;
      border-radius:30px 50px;}
h{padding:60px;}
</style>

border-radius:三个值,第一个值控制左上的圆角,第二个值控制右上和左下的圆角,最后一个值控制右下的圆角。
<style>
.box{ width:300px;
      height:100px;
      background:#FC9;
      border-radius:30px 50px 80px;}
</style>

border-radius:四个值,分别表示左上,右上,右下,左下四个圆角值
<[size=1em]style>
.box{ width:300px;
      height:100px;
      background:#FC9;
      border-radius:30px 50px 80px 100px;}
</style>

由于部分浏览器可能不支持border-radius属性,所以兼容性写法如下:
-mo2-border-radius:10px;
-wekbit-border-radius:10px;
-o-border-radius:10px;
搜索更多相关主题的帖子: style 网页 background 
2015-11-17 15:14
快速回复:认识CSS3—更容易的网页细节border-radius属性
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.023679 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved