资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

使用border-radius属性怎么给元素添加圆角边框

本篇文章为大家展示了使用border-radius属性怎么给元素添加圆角边框,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

为弓长岭等地区用户提供了全套网页设计制作服务,及弓长岭网站建设行业解决方案。主营业务为成都做网站、成都网站建设、弓长岭网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

border-radius:10px; /* 所有角都使用半径为10px的圆角 */

使用border-radius属性怎么给元素添加圆角边框

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */

使用border-radius属性怎么给元素添加圆角边框

不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。

实心上半圆:

方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。

div{   
  
  height:50px;/*是width的一半*/     
  width:100px;   
  background:#9da;     
  border-radius:50px 50px 0 0;/*半径至少设置为height的值*/     
  }

实心圆:

方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。

如下代码:

div{   
  height:100px;/*与width设置一致*/    
  width:100px;   
   background:#9da;   
   border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/    
  }

完整代码

  
  
  
  
border-radius</www.dztcsd.com/title>  
<style type="text/css">  
div.circle{   
    height:100px;/*与width设置一致*/   
    width:100px;   
    background:#9da;   
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/   
    }   
/*任务部分*/      
div.semi-circle{    
    height:100px;   
    width:50px;   
    background:#9da;   
    border-radius:?;   
    }   
      
</style>  
</head>  
<body>  
<div class="circle">  
</div>  
<br/>  
<!--任务部分-->  
<div class="semi-circle">  
</div>  
  
</body>  
</html></pre><p>上述内容就是使用border-radius属性怎么给元素添加圆角边框,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。</p>            
            
                        <br>
            当前文章:使用border-radius属性怎么给元素添加圆角边框            <br>
            本文路径:<a href="http://www.cdkjz.cn/article/gjesgo.html">http://www.cdkjz.cn/article/gjesgo.html</a>
        </div>
        <div class="g-return-wrapper clearfix">
            <a href="http://www.cdkjz.cn/" class="home">返回首页</a>
            <a href="http://www.cdkjz.cn/news/" class="column">了解更多建站资讯</a>
        </div>
    </div>
</div>
<div class="full-related-news">
    <h3 class="related-title">相关资讯</h3>
    <div class="related-news weblg">
        <ul class="clearfix">
            <li>
                    <a href="/article/hsgsod.html">
                        <h2 class="title">有java代码如何,简单的Java代码</h2>
                    </a>
                </li><li>
                    <a href="/article/hsgsoi.html">
                        <h2 class="title">vb.netudp编程,VBNET编程宝典</h2>
                    </a>
                </li><li>
                    <a href="/article/hsgcsh.html">
                        <h2 class="title">oracle如何定义事务,oracle怎么提交事务</h2>
                    </a>
                </li><li>
                    <a href="/article/hsgsoe.html">
                        <h2 class="title">oracle补丁如何安装,oracle怎么安装</h2>
                    </a>
                </li><li>
                    <a href="/article/hsgche.html">
                        <h2 class="title">php查最新的一跳数据,php查最新的一跳数据是什么</h2>
                    </a>
                </li><li>
                    <a href="/article/hsgcjg.html">
                        <h2 class="title">oracle怎么添加组件,oracle插件怎么安装</h2>
                    </a>
                </li><li>
                    <a href="/article/hsgcis.html">
                        <h2 class="title">phpxml更新数据表的简单介绍</h2>
                    </a>
                </li><li>
                    <a href="/article/hsgceo.html">
                        <h2 class="title">c语言函数数组值交换,c++ 交换函数</h2>
                    </a>
                </li>        </ul>
    </div>
</div>
<div class="full-icontact-cover m-ft-contact">
    <div class="weblg">
        <div class="clearfix content">
            <div class="motto">
                多年建站经验
            </div>
            <div class="info">
                <h3>多一份参考,总有益处</h3>
                <h2> 联系快上网,免费获得专属《策划方案》及报价</h2>
                <div class="msg">
                    <p>咨询相关问题或预约面谈,可以通过以下方式与我们联系</p>
                    <h4> 大客户专线   成都:<a
                            href="tel:+13518219792" rel="nofollow">13518219792</a>
                          座机:<a href="tel:02886922220" rel="nofollow">028-86922220</a>
                    </h4>
                </div>
            </div>
        </div>
        <div class="btns clearfix">
            <a href="https://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" target="_blank" rel="nofollow"
               class="oline">在线咨询</a>
            <a href="javascript:;" class="edit" rel="nofollow">提交需求</a>
        </div>
    </div>
</div>
<div class="footer-content">
    <div class="weblg clearfix">
        <div class="friend-links">
            <h6 class="clearfix">
                <span class="tilte">友情链接</span>
                <a class="exchagne" href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes">交换友情链接</a>
            </h6>
            <div class="link-list clearfix">
                <div class="link-slider">
                    <a href="https://www.scvps.cn/" title="成都虚拟主机" target="_blank">成都虚拟主机</a><a href="http://www.cxhljz.cn/solution/" title="教育建设方案" target="_blank">教育建设方案</a><a href="http://m.xwcx.net/wangzhan/" title="定制级高端网站建设" target="_blank">定制级高端网站建设</a><a href="http://m.cdxwcx.com/tuoguan.html" title="电信服务器托管" target="_blank">电信服务器托管</a><a href="http://chengdu.cdcxhl.com/weixin/" title="微信小程序开发" target="_blank">微信小程序开发</a><a href="https://www.cdxwcx.com/jifang/xibuxinxi.html" title="西部信息中心" target="_blank">西部信息中心</a><a href="https://www.cdcxhl.com/xiyun.html" title="西云主机托管" target="_blank">西云主机托管</a><a href="http://www.gzjike.cn/" title="公路钻孔机" target="_blank">公路钻孔机</a><a href="http://chengdu.kswsj.cn/" title="高端网站设计推广" target="_blank">高端网站设计推广</a><a href="http://www.kswsj.cn/tuiguang/" title="网站SEO优化排名" target="_blank">网站SEO优化排名</a>                </div>
            </div>
        </div>
    </div>
    <div class="full-foot-bottom">
        <div class="weblg clearfix">
            <p>成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询<a href="tel:028-86922220">028-86922220</a></p>
            <p>
                成都快上网科技有限公司-四川网站建设设计公司 | <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">蜀ICP备19037934号</a> Copyright 2020,ALL Rights Reserved cdkjz.cn | <a href="http://www.cdkjz.cn/" target="_blank">成都网站建设</a> | © Copyright 2020版权所有.</p>
            <p>专家团队为您提供<a href="http://www.cdkjz.cn/" target="_blank">成都网站建设</a>,<a href="http://www.cdkjz.cn/" target="_blank">成都网站设计</a>,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | <a href="###">网站建设地图</a></p>
        </div>
    </div>

</div>
<script type="text/javascript" src="../js/idangerous.swiper.min.js"></script>
<script type="text/javascript" src="../js/wow.min.js"></script>
<script type="text/javascript" src="../js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="../js/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="../js/layout.js"></script>
</body>
</html>
<script>
    $(".singlepage img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
    window.onload=function(){
        document.oncontextmenu=function(){
            return false;
        }
    }
</script>