脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

CSS3中border-radius属性设定圆角的使用技巧

wangbaiyuan   发布时间：2016-05-10 11:16:09   作者：王柏元   我要评论
这篇文章主要介绍了CSS3中border-radius属性设定圆角的使用技巧,border-radius的作用不止是最常用的圆角矩形,我们还可以利用它设置弧度来制作其他弧线边框图形,需要的朋友可以参考下

border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet Explorer 8及更低版本，所有的浏览器可以显示圆角。
为了使样式能正确应用，需要为Webkit和Mozilla内核添加前缀。

CSS Code复制内容到剪贴板
  1. -webkit-border-radius: 10px;   
  2. -moz-border-radius: 10px;   
  3. border-radius: 10px;  

然而，今天我们不关心前缀，只简单坚持官方形式：border-radius。
2016510110907211.jpg (253×999)

如你所料，我们可以为每个角指定不同的值。
2016510110940699.jpg (599×525)

CSS Code复制内容到剪贴板
  1. border-top-left-radius: 20px;   
  2. border-top-rightright-radius: 0;   
  3. border-bottom-rightright-radius: 30px;   
  4. border-bottom-left-radius: 0;  

在上面的代码中，设置border-top-right-radius和border-bottom-left-radius为零是多余的，除非该元素有继承的值。
按top-left, top-right, bottom-right, bottom-left顺序设置每个 radius 的值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
我们可以实验，

CSS Code复制内容到剪贴板
  1. border-radius:2px;  

等价于：

CSS Code复制内容到剪贴板
  1. border-top-left-radius:2px;   
  2. border-top-rightright-radius:2px;   
  3. border-bottom-rightright-radius:2px;   
  4. border-bottom-left-radius:2px;  

例子2:

CSS Code复制内容到剪贴板
  1. border-radius:2em 1em 4em / 0.5em 3em;  

等价于：

CSS Code复制内容到剪贴板
  1. border-top-left-radius:2em 0.5;   
  2. border-top-rightright-radius:1em 3em;   
  3. border-bottom-rightright-radius:4em 0.5em;   
  4. border-bottom-left-radius:1em 3em;  

就像margin和padding一样，如果需要的话，这些设置可以合并为一个单一的属性。

CSS Code复制内容到剪贴板
  1. /* 左上角, 右上角, 右下角, 左下角 */  
  2. border-radius: 20px 0 30px 0;  

举个例子(网页设计师经常这样做)，可以用CSS的border-radius属性模拟柠檬的形状，如下：

CSS Code复制内容到剪贴板
  1. .lemon {   
  2.    width: 200px; height: 200px;   
  3.     
  4.    background: #F5F240;   
  5.    border: 1px solid #F0D900;        
  6.    border-radius: 10px 150px 30px 150px;   
  7. }  

2016510111043906.jpg (533×534)

相关文章

  • CSS3 border-radius圆角的实现方法及用法详解

    这篇文章主要介绍了CSS3 border-radius圆角的实现方法及用法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-14

  • 使用CSS的border-radius属性 设置圆弧

    这篇文章主要介绍了使用CSS的border-radius属性 设置圆弧,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-11-26

  • css3 border-radius属性详解

    这篇文章主要介绍了css3 border-radius属性详解,这里整理了详细的代码资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-05

  • border-radius以外的CSS圆角边框制作方法

    用CSS3的border-radius属性来制作圆角边框相当顺手,然而浏览器的兼容问题并不是太好处理,这里我们就来总结一下border-radius以外的CSS圆角边框制作方法.
    2016-06-02

  • CSS3 border-radius(圆角)效果在线调试工具

    这是一款可在线调试并预览CSS3 border-radius(圆角)效果的工具。右侧具有实时调试并显示预览效果的功能，同时能够实时生成对应的css3效果代码，方便需要的朋友使用。
    2016-05-31

  • 利用CSS3的border-radius绘制太极及爱心图案示例

    CSS3中的border-radius可以轻松地用来绘制弧线,如果只用来做圆角矩形的话可就太浪费了,下面就来展示一下利用CSS3的border-radius绘制太极及爱心图案示例,需要的朋友可以参
    2016-05-17

  • 实例讲解CSS3中的border-radius属性

    这篇文章主要介绍了实例讲解CSS3中的border-radius属性,是CSS3入门学习中的基础知识,需要的朋友可以参考下
    2015-08-18

  • HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手

    这篇文章主要介绍了HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，
    2021-05-10

最新评论

关注微信公众号

扫一扫