怎么使用css3实现圆角效果

这篇文章主要介绍了怎么使用css3实现圆角效果,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

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

使用css3实现圆角效果的优点

  1. 减少网站维护工作量。

  2. 提高了网站的性能,少了对图片的 HTTP 的请求,网页载入速度将变快。

  3. 增加视觉美观性。

使用css3实现圆角效果的原理

我们需要使用css3中的border-radius属性,那么今天我们将带大家详细了解一下border-radius属性。

      border-radius属性

  1. 含义:  border-radius属性简写属性为元素添加圆角边框.

  2. 语法:border-radius: 1-4 length|% / 1-4 length|%;

  3. 浏览器兼容性:IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

使用css3实现圆角效果的代码

实例一:指定背景颜色的元素圆角

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

实例效果如图所示

怎么使用css3实现圆角效果

怎么使用css3实现圆角效果

怎么使用css3实现圆角效果

实例二:指定特定的元素圆角

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

实例效果如图所示

怎么使用css3实现圆角效果

怎么使用css3实现圆角效果

怎么使用css3实现圆角效果

属性的两个长度第一个值是水平半径,第二个是垂直半径。如果省略第二个值,它是从第一个复制。如果任一长度为零,角落里是方的,不圆润。border-radius属性还可以制作椭圆,我们将在后面的文章向大家介绍。

感谢你能够认真阅读完这篇文章,希望小编分享怎么使用css3实现圆角效果内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!


网站栏目:怎么使用css3实现圆角效果
本文链接:http://myzitong.com/article/joicgh.html