.box{
background:grey; //灰色背景
height:50px; //高500像素
width:200px; //宽200像素
border-top-left-radius:15px; //边框 左上 圆角15像素 4个圆角都是15像素
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
} 也可以这么写 .box{
border-radius:15px;
}
或者这么写
.box{
border-radius:15px 10px 15px 20px;
}

  

设置规则:

  一个值:四个圆角的值相同

  两个值:第一个值为左上角与右下角,第二个值为右上角以左下角

  三个值:第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角

  四个值:第一个值为左上角,第二个值为右上角,第单个值为右下角,第四个值为左下角

  

使用百分比:

.box{
border-radius:50%;
}

  圆角半径分别是height和width的50%

椭圆圆角:

  

.box{
border-radius:50px/15px
}

  第一个值为圆角的横轴半径,第二个值为圆角的纵轴半径

边框圆角Css的更多相关文章

  1. CSS的display、hover、overflow、&copy(版权符号)、borer-radius(边框圆角)

    一.display: none 隐藏 block显示     visibility:hidden隐藏 visible显示 display:none和visibility:hidden这两个属性对应的值 ...

  2. CSS border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  3. CSS(五)- 背景与边框 - 边框圆角与阴影基础用法

    扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ...

  4. css边框样式、边框配色、边框阴影、边框圆角、图片边框

     边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...

  5. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  6. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  7. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  8. 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. css3(border-radius)边框圆角详解(转)

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

随机推荐

  1. C# 32位程序,申请大内存,附dome(wpf),亲测可用

    1.我是vs2017,在选装vs的时候,需要安装c++模块,因为申请大内存的必要exe存放在vc的某个目录(下面会给出详细的地址)下的 2.安装完成在vs的安装目录可找到这个文件,我是社区版本的,如果 ...

  2. JIT与JVM的三种执行模式:解释模式、编译模式、混合模式

    Java JIT(just in time)即时编译器是sun公司采用了hotspot虚拟机取代其开发的classic vm之后引入的一项技术,目的在于提高java程序的性能,改变人们“java比C/ ...

  3. Day 31 面向对象考试题 第四次考试.

    一 基础知识和函数: 1.文件操作有哪些模式?请简述各模式的作用 r ,只读模式[默认模式,文件必须存在,不存在则抛出异常] w,只写模式[不可读:不存在则创建:存在则清空内容] x, 只写模式[不可 ...

  4. Day 15 内置函数 , 匿名函数.

    1. 最大值 max,最小值# #最大值 ret = max(1,2,-3)print(ret)# 结果 2ret=max([1,2,3,4])print(ret)# 结果 4 2.sum 函数用法 ...

  5. MySQL数据库中的字段类型varchar和char的主要区别是什么?哪种字段查找效率要高?

    1,varchar与char的区别?(1)区别一,定长和变长,char表示定长,长度固定:varchar表示变长,长度可变.当插入字符串超出长度时,视情况来处理,如果是严格模式,则会拒绝插入并提示错误 ...

  6. fluentd 推送 mariadb audit log

    说明: mariadb audit log是 mariadb 的审计日志 目的是把日志拆分成 tab 键分隔的字段 直接附上 fluentd 配置文件 <system> log_level ...

  7. SpringBoot入门之分散配置

    springboot默认支持两种格式的配置文件:.properties和.yml.其中.properties是属性文件,也是最常用的一种:.yml是yaml格式的文件,yaml是一种简洁的标记语言.例 ...

  8. ES6字符串相关扩展

    变量的解构赋值 // 数组的解构赋值 let [a,b,c] = [1,2,3]; //1,2,3 let [a,b,c] = [,123,]; //undefined 123 undefined l ...

  9. Java之Spring Boot学习

    1.如何配置pdf.xls页面解析器.2.如何整合SpringBoot+JPA+Session+Redis配置.3.SpringBoot整合Mybatis之事务用法.4.JUnit Test单元测试用 ...

  10. WebDriverAPI(4)

    单击某个元素 采用元素id.click()方法即可 双击某个元素id.doubleClick 操作单选下拉列表 测试网页HTML代码 <html> <body> <sel ...