无限技术编程网|新闻无限网|无限新视界
当前位置:首页 > 网站源码 > CSS

CSS

css写出圆形边框

时间:2019-06-28 08:48:17   作者:无限编程网   来源:无限编程网   阅读:104   评论:0

css代码:

.yj{

    padding:10px; width:300px; height:50px;

    border: 2px solid #000000;

    -moz-border-radius: 15px; 

    -webkit-border-radius: 15px; 

    border-radius:15px;           

}

 -moz-border-radius: 15px; -webkit-border-radius: 15px;  这两个是为了兼容其他一些不常用浏览写的css圆角代码

html代码

<div class="yj">这个div四个角都圆15px;</div>

结果如下:

css写出圆形边框

图片圆角也是一样的:

css代码:

.yj{-moz-border-radius: 15px;     -webkit-border-radius: 15px; border-radius:15px;}

html代码

<img src="http://itimg.fjwqss.cn/OT20190628084902971.jpg" width="100px" height="100px;" class="yj" />

结果如下:

css写出圆形边框

css3圆角代码也支持上下左右的:

css代码这么写:

.yj{

    padding:10px; width:300px; height:50px;

    border: 2px solid #000000;

    -moz-border-radius: 0px 0px 20px 25px;;     

    -webkit-border-radius: 0px 0px 20px 25px;;  

    border-radius:0px 0px 20px 25px;; 

}

结果如下

css写出圆形边框

圆角代码也支持拆分的(四个边框都圆角10px的拆分css代码如下):

border-top-left-radius: 10px;   

border-top-right-radius: 10px; 

 border-bottom-right-radius:10px;  

border-bottom-left-radius:  10px;

声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。邮箱:service@fjwqss.cn。本站原创内容未经允许不得转载,或转载时需注明出处:无限编程网。新闻无限网无限编程网门户 » css写出圆形边框


上一篇:没有了
下一篇:CSS实现毛玻璃透明效果

相关文章


关注我们

微信公众号:IT因特网

微信公众号:伟权叔叔


"网站源码"所属栏目

本栏最新更新

阅读排行