当前位置:首页 > 网站建设问答

CSS3中圆角怎么设置 2016-09-05

分类:网站建设问答  |  VISITORS:

例一:圆角边框样式设定

<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 */
}

QQ截图20160905094331.png


例二:无边框圆角边背景式设定

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

QQ截图20160905094356.png

例三:样式书写顺序

/* Gecko browsers */
-moz-border-radius: 5px;
/* Webkit browsers */
-webkit-border-radius: 5px;
/* W3C syntax - likely to be standard so use for future proofing */
border-radius:10px;


例四:样式拆分

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;

上一篇:cnzz统计代码怎么来的下一篇:怎样设置服务器404错误提醒页面?
相关文章
结识维赛客

让您知道如何利用互联网找到创新营销模式、找到高质量的目标客户、挖掘有独特卖点的产品、让你快速突破市场困局

用最快速度、最低成本获取源源不断的订单 With the fastest speed, lowest cost, steady stream of orders

查看更多