CSS3边框border-radius
一、官方解释
设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数。
水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
如果只提供一个,将用于全部的于四个角。
如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。
垂直半径也遵循以上4点。
对应的脚本特性为borderRadius。
二、例子
2.1 四个参数值
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50px;"></div>
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 100px;"></div>
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50px 100px;"></div>
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 10px 30px 50px 100px;"></div>
所以border-radius里面的参数应该代表的是四个角上圆的半径。
2.2 百分比
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 25%;"></div>
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50%;"></div>
2.3 水平半径/垂直半径
<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 100px/150px;"></div>
<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 200px/300px;"></div>
<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 200px/200px;"></div>
这里的半径全等于本身宽度(width/2)+半径宽度(border-width/2)即为一个椭圆。另外半径最多渲染宽度(width/2)+半径宽度(border-width/2)的值,超过的按比例值来算。
CSS3边框border-radius的更多相关文章
- HTML 学习笔记 CSS3 (边框)
CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...
- CSS3边框与圆角
1. CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性,这个属性允许你为元素添加圆角边框!语法:border-radius: 1-4 ...
- [HTML] CSS3 边框
CSS3 边框 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shado ...
- CSS3边框温故
1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px( ...
- css3 边框记
css3 边框 border属性在css1中就已经定义了,使用它可以设置元素的边框风格,边框颜色以及边框粗细. border-width:设置元素边框的粗细. border-color:设置元素边框的 ...
- demo_01 css3中的radius
css属性:border-radius :border:边框:radius:弧度:所以这个属性的意思很明了. 下面实现一个小demo: <!doctype html> <html&g ...
- CSS3 边框
说明:CSS3完全向后兼容,因此不必改变现有的设计.浏览器通常支持CSS2 CSS3模块 CSS3被划分为模块: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CS ...
- 第八十节,CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 ...
- css3边框与背景
一.css3边框 1.border-image 边框 border-image: url(xxx.png) number stretch 很好理解就是拉伸,有多长拉多长. repeat (和4角上 同 ...
- 第95天:CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
随机推荐
- 程序员取悦女票的正确姿势---Tip1(iOS美容篇)
代码地址如下:http://www.demodashi.com/demo/11695.html 前言 女孩子都喜欢用美图工具进行图片美容,近来无事时,特意为某人写了个自定义图片滤镜生成器,安装到手机即 ...
- Linux下使用Fastboot给手机刷ROM
前言 一直在刷机.失败.刷机.失败中,还好今天有个任务能够使用fastboot刷机.好开心,最终不用切换系统了.(话说好久没有写代码了,身为一个互联网程序猿,不写代码我easy紧张). 开发环境 Ub ...
- docker run
1.登录Docker Hub 账户 2.输入命令:构建一个web应用. docker run -d -P training/webapp python app.py 参数说明: -d:让容器在后台运行 ...
- ubuntu 12.04 install gcc 4.8
http://askubuntu.com/questions/271388/how-to-install-gcc-4-8-in-ubuntu-12-04-from-the-terminal sudo ...
- C/C++ 错误笔记-在给结构体中的指针赋值时,要注意该指针是否已指向内存空间
先来看下面的例子: #include <stdlib.h> #include <string.h> #include <stdio.h> #pragma warni ...
- PILE读书笔记_文件I/O
open函数 int open(const char *pathname, int flags, mode_t mode); 参数说明: (1)pathname: 表示要打开的文件路径 (2)flag ...
- is char signed or unsigned?
工作这么多年,一直认为char是有符号的,而事实上gcc和vs默认也是有符号,但是c规范里实际并没有指明char是有符号还是无符号,所以char比较特殊, char signed char unsig ...
- linux嵌入式大神的博客文章---持续更新中
linux kernel子系统相关博客:http://www.wowotech.net/ 经典博文: http://blog.csdn.net/zqixiao_09 http://blog.china ...
- bootstrap-table接合knockout.js
function responseHandler(data) { if (data.ErrorNo > 0) { return; } var count = data.Data.TotalRow ...
- Photoshop脚本之调试
系统:mac 创建test.scpt和test.jsx command+空格,打开 脚本编辑器(applescript) 脚本编辑器打开test.scpt 输入: tell application & ...