绘制一个圆角边框的示例

.div{
  border: solid 5px blue;
  border-radius: 20px;
  -moz-border-radius:20px;
  -o-border-radius: 20px;
  -webkit-border-radius:20px;
  background-color:skyblue;
  padding:20px;
  width:180px;
}

  在示例中具有一个div元素,使用border-radius属性将其边框绘制为圆角边框,圆角半径为20像素,边框颜色为蓝色,div元素背景色为浅蓝色。

border-radius中指定两个半径

.wrap {
  border: solid 5px blue;
  border-radius: 40px 20px;
  -moz-border-radius:40px 20px;
  -o-border-radius:40px 20px;
  -webkit-border-radius:40px 20px;
  background-color:skyblue;
  padding:20px;
  width:180px;
}

 

不显示边框

在CSS3中,如果使用了border-radius属性但是把边框设定为不显示的时候,浏览器将把背景的四个角绘制为圆角。

修改边框种类

使用了border-radius属性后,不管边框是什么种类,都会将边框沿着圆角曲线进行绘制。

绘制四个角不同半径的圆角边框

如果要绘制的圆角边框四个角半径各不相同,可以将border-top-left-radius属性、border-top-right-radius属性、border-bottom-right-radius属性、border-bottom-left-radius属性结合起来使用。

示例:

.wrap {
border: solid 5px blue;
  border-radius-topleft:10px;
  border-radius-topright:20px;
  border-radius-bottomright:30px;
  border-radius-bottomleft:40px;
  -moz-border-radius-topleft:10px;
  -moz-border-radius-topright:20px;
  -moz-border-radius-bottomright:30px;
  -moz-border-radius-bottomleft:40px;
  -o-border-radius-topleft:10px;
  -o-border-radius-topright:20px;
  -o-border-radius-bottomright:30px;
  -o-border-radius-bottomleft:40px;
  -webkit-border-top-left-radius:10px;
  -webkit-border-top-right-radius:20px;
  -webkit-border-bottom-right-radius:30px;
  -webkit-border-bottom-left-radius:40px;
background-color:skyblue;
padding:20px;
width:180px;
}

  

 

css3学习总结2--CSS3圆角边框的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记(1)-CSS3选择器

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  3. CSS3学习笔记(4)-CSS3函数

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  4. css3如何实现圆角边框

    圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...

  5. CSS3学习(圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等)

    matrix CSS3 1.  圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二 ...

  6. css3圆角边框,边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

  7. css3学习笔记之边框

    CSS3 圆角 border-radius 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <h ...

  8. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  9. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

随机推荐

  1. POJ3038 Flying Right

    Description Figuring that they cannot do worse than the humans have, Farmer John's cows have decided ...

  2. UVa OJ 140 - Bandwidth (带宽)

    Time limit: 3.000 seconds限时3.000秒 Problem问题 Given a graph (V,E) where V is a set of nodes and E is a ...

  3. XSS Filter Evasion Cheat Sheet 中文版

    前言 译者注: 翻译本文的最初原因是当我自己看到这篇文章后,觉得它是非常有价值.但是这么著名的一个备忘录却一直没有人把它翻译成中文版.很多人仅仅是简单的把文中的 各种代码复制下来,然后看起来很刁的发在 ...

  4. C语言计算任意数的任意次方

    #include "stdio.h" #include"stdlib.h" #define max 500 void yiwei(int *a,int n,in ...

  5. TortoiseGit-创建分支、合并分支

    第一步:创建本地分支 点击右键选择TortoiseGit,选择Create Branch-,在Branch框中填写新分支的名称(若选中"switch to new branch"则 ...

  6. stm32f系列单片机startup_stm32fxxx.s文件说明(转)

    * 文件名          : startup_stm32f10x_hd.s;* 库版本           : V3.5.0;* 说明:             此文件为STM32F10x高密度设 ...

  7. 实现JavaScript自定义函数的整合、链式调用及类的封装

    函数声明形式:表单验证函数 1 2 3 4 5 6 7 8 9 10 11 12 13 function checkName(){     console.log('检查用户名'); } functi ...

  8. 用WP_Query自定义WordPress 主循环

    我们知道操作 WordPress 主循环(WordPress Loop)最容易的方法是使用 query_posts 函数. 但是使用 query_posts 直接修改 WordPress 默认的主循环 ...

  9. poj1013.Counterfeit Dollar(枚举)

    Counterfeit Dollar Time Limit: 1 Sec  Memory Limit: 64 MB Submit: 415  Solved: 237 Description Sally ...

  10. 完美串(区间dp)

    完美串 Description 爱美之心人皆有之,GG也不例外.所以GG他对于完美串有一种热衷的爱.在GG眼中完美串是一个具有无比魅力的01子串.这个子串有之其魅力之处,对它取反后水平翻转,它又和它原 ...