css3的border-radius属性使用方法
1、border-radius可以包含两个参数值,第一个水平圆角半径,第二个为垂直半径,并且两个参数值用“/”分开。
2、border-radius:设置一个值为四个角都相同,两个值为左上和右下相同,右上左下相同。三个值分别为左上,右上与左下相同,右下。四个值为顺时针:左上,右上,右下,左下。
3、如果要将四个角的半径水平垂直都不同的话,这样设置:border-radius:60px 40px 30px 20px / 30px 20px 10px 5px;//"/" 前面的为水平半径,“/”后面的为垂直半径。
4、分开设置各个顶点的圆角的水平和垂直半径时不需要“/”,例如:
border-top-left-radius:10px 50px;
border-bottom-left-radius:10px 50px;
border-top-left-radius:10px / 50px; //这样写是错的
5、圆角边框的特殊应用:
1>border-radius还有一个内半径和外半径的区别,当元素边框值比较大时,效果比较明显。当boder-radius的半径小于或等于border的厚度时,元素边框内部就不具有圆角效果,因为border-radius内边半径=外边半径-对应的边框宽度。
2>元素相邻边有不同的宽度,这个角也会从宽的边平滑过渡到窄的边,其中一条边甚至可以为0
6、表格应用圆角:只有border-collapse属性为separate时,表格圆角才能正常显示
table{
margin: 30px;
padding: 10px;
border: 5px solid black;
border-radius: 10px;
}
.table1{
border-collapse:collapse;
}
.table2{
border-collapse:separate;
}
<table class="table1">
<tr>
<td>border-collapse:collapse</td>
</tr>
</table>
<table class="table2">
<tr>
<td>border-collapse:separate</td>
</tr>
</table>
7、border-radius属性浏览器兼容问题:
IE8及以下浏览器不支持border-radius属性有些老一点的浏览器需要添加私有前缀。
处理兼容性问题:
1>使用第三方插件,例如IE-css3.js,PIE,或者其他javascript脚本插件
2>在不支持border-radius属性的浏览器采用另一套样式。也就是实现css2中的图片实现圆角方法的优雅降级,在不支持border-radius的浏览器显示直角。
css3的border-radius属性使用方法的更多相关文章
- 让IE浏览器支持CSS3圆角属性的方法
绘出圆角: 1.下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar:.htc 文件是IE内核支持Web行为 ...
- java定义一个Circle类,包含一个double型的radius属性代表圆的半径,一个findArea()方法返回圆的面积
需求如下:(1)定义一个Circle类,包含一个double型的radius属性代表圆的半径,一个findArea()方法返回圆的面积. (2)定义一个类PassObject,在类中定义一个方法pri ...
- CSS3的新增边框属性
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
- 【Visual Lisp】Visual Lisp属性与方法
说明:Visual Lisp属性的获取.赋值和方法的执行有多种形式.然而对于初学者来说一次性就要全部掌握显然是没有必要的,有时候每种方法都是通用的功能都一样我们就没有必要把所有方法都记住.我们只需要掌 ...
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...
- HTML5 canvas图像绘制方法与像素操作属性和方法
图像绘制方法 drawImage() 向画布上绘制图像.画布或视频 像素操作属性和方法 width 返回 ImageData ...
- HTML5 canvas文本属性与方法
文本属性和方法 font 设置或返回文本内容的当前字体属性 textAlign 设置或返回文本内容的当前对齐方式 start ...
- HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
- Android绘图机制(一)——自定义View的基础属性和方法
Android绘图机制(一)--自定义View的基础属性和方法 自定义View看起来,确实看起来高深莫测,很多Android开发都不是特别在行这一块,这里面的逻辑以及一些绘画都是有一点难的,说一下我目 ...
- vue绑定html的class属性的方法
一.对象语法绑定class属性 class的属性代码如下 <style type="text/css"> .red{ color: red; width: 100px; ...
随机推荐
- SpringBoot | Thymeleaf | 局部更新
建立一个实体类: public class Fruit { int id; String name; public Fruit() { } public Fruit(int id, String na ...
- Jquery | 外部插入节点
after(content) : //在 span 元素外部的后面 插入 "<span><b>Write Less Do More</b><span ...
- JMeter博客系列:JMeter BeanShell示例
1.简介 Apache JMeter是一个基于Java的开源工具,使您可以在应用程序上执行功能,负载,性能和回归测试.应用程序可以在Web服务器上运行,也可以是独立的.它支持在包含静态和动态资源的客户 ...
- Hive_Hive的管理_CLI方式
Hive的启动方式- CLI- Web UI- 远程服务启动方式 (1)hive命令行的交互模式,进入hive: hive; hive --service cli; hive -S;(设置Hive静默 ...
- python入门之实例-用户登录、注册
用户密码存储文件db(其中用户和密码之间用$符合隔开): admin$123456 root$sdfk9f24 chy$654321 代码如下: def login(username,password ...
- RTT
Segger RTT的使用 一般arm系统中,如何通过电脑键盘和显示器同mcu进行交互最有效的有两种形式:arm7的semihost,cm时代的traceswo.现在jlink推出了颇具特色的rtt( ...
- [已读]JavaScript语言精髓与编程实践
推荐第二章的内容,关于表达式和运算符的内容很独到.
- SPOJ1716 GSS3(线段树)
题意 Sol 会了GSS1,GSS3就比较无脑了 直接加个单点修改即可,然后update一下 /* */ #include<cstdio> #include<cstring> ...
- Android Studio你必须学会的快捷键(Eclipse转AS必看)
前言:从Eclipse转到Android Studio之后,一开始把keymap设置成Eclipse,却发现有些常用的快捷键都失效了,大概是冲突了.想了下,觉得与其重新设置快捷键,不如去适应AS的快捷 ...
- 模拟一次CSRF(跨站请求伪造)例子,适合新手
GET请求伪造 有一个论坛网站,网站有一个可以关注用户的接口,但是必须登录的用户才可以关注其他用户. 这个网站的网站是www.a.com 有一天有一个程序员想提高自己的知名度,决定利用CSRF让大家关 ...