border-radius(CSS3属性)
一、border-radius 完整写法:
border-radius:为元素添加圆角边框。
border-radius:10px 20px 30px 40px/40px 30px 20px 10px
“/”前的四个数值表示圆角的水平半径,后面四个值表示圆角的垂直半径。
水平半径和垂直半径表示如下:
比如:
border-radius: 2em 1em 4em / 0.5em 3em;
等同于
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
常见简写方式:
- border-radius:30px/20px;表示每个圆角的水平半径时30px,垂直半径为20px;
- border-radius:30px; 等同于:border-radius:30px 30px 30px 30px/30px 30px 30px 30px;
二、属性值不同数量
border-radius是最多可指定四个 border -*- radius 属性的复合属性: border-top-left-radius(左上角)、border-top-right-radius(右上)、border-bottom-right-radius(右下角)、border-bottom-left-radius(左下角)
四个值时:border-radius:30px 20px 30px 10px;(每个数值表示的是圆角的半径值,将每个角的水平和垂直半径都设置为对应的数值)
左上(10px),右上(20px),右下(30px),左下(10px)三个值时: border-radius:30px 50px 10px;(左上 右上左下 右下),对角线相等
两个值时:border-radius:90px 50px;(第一个值左上角和右下角 第二个值右上角和左下角)
- 一个值时(常用):border-radius:50px; 常用来设置圆形边框、圆角按钮,四个角的圆角值相同。
属性值可以是px、%、em:
- 1.px:半径值就是设置的像素值
- 2.%:
div{width:200px;height:100px;border-radius:50%;}
以元素的宽高乘以百分数后得到值r1和r2,进行绘制。等同于border-radius:100px/50px;
注意:利用birder-radius让元素变成圆时,注意border与padding会改变盒子模型大小。此时直接将border-radius直接设置为50%能够形成圆,如果只设置成内容区域宽高的一半,形成的不是规则的圆。
- 3.em:em是最常见的相对长度单位,这是排版中使用的一种度量方式,基准值是当前元素的字号大小。 在CSS中,1em表示当前元素的字号大小,实际值取决于在哪个元素上应用。
border-radius: 2em/1em
border-radius(CSS3属性)相关推荐
- 如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
- CSS3属性border-radius参数详解
border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...
- html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...
- CSS3属性的兼容 什么是弹性和布局
CSS3新特性,兼容性,兼容方法总结 css3手册css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius:[ <length> | <p ...
- css3属性之边框圆角、背景与渐变
css3之圆角.背景及渐变 border-radius 兼容性:IE9+.Firefox 4+.Chrome.Safari 5+ 以及 Opera border-radius 属性允许我们为元素添加圆 ...
- html+not选择器,CSS3属性选择器与(:not)选择器_html/css_WEB-ITnose
一:css3属性选择器: img[alt]{ border:2px dashed #000;} 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代 ...
- css3属性基本骨架
css3属性 浏览器前缀 -ms-代表IE浏览器 -khtml-代表苹果浏览器 -moz-代表火狐浏览器 -o-代表欧朋浏览器 -webkit-代表谷歌浏览器 字体 1.text-shadow设置文字 ...
- 用css3属性如何来做一个动态螺旋丸
效果图: 这里用到的css3属性: transform animation transform-style <body><div class="smallbox" ...
- CSS3 属性样式总结记录(图文)
CSS3 属性样式总结记录 1 .边框-背景 border-image 设置所有边框图像的速记属性. 3 border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3 box-s ...
- 【04】HTML5+CSS3:01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性 ...
最新文章
- Go语言实战读书笔记
- 《Cisco QoS认证考试指南(第2版)》——1.1节“我已经知道了吗?”测试
- 【独家】搜狗黎志:创新和竞争是推动时代发展的原动力
- C和C++的关键字区别
- hadoop相关随记
- 剧情介绍:“我是山姆”
- gbk汉字编码拼音对照表_预习部分:汉字编码方案
- 特殊权限suid,sgid,sticky和acl(访问控制列表)参数详解
- android之StrictMode介绍
- 6. DICOM图像显示-DCMTK-像素数据获取的三种方式和源码分析
- linux常用rm命令详解,Linux中rm命令详解
- 开发手机APP的一些心得体会
- csv文件打开波形,SPICE Explorer 2007.1 软件使用
- Java中Double与BigDecimal的互转,Date和LocalDateTime互转
- 【语音唤醒】MDTC:Multi-scale dilated temporal convolutional network
- 关于C语言中feof的使用
- 判断三点顺序(顺时针或者逆时针)(模板)
- Asp.Net Core SignalR获取集线器实例,从集线器外部发送消息
- HTC S510b官方解锁、刷recovery、刷ROOT教...
- 利用Delphi编程控制摄像头(图)