纯代码实现CSS圆角
我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了。
纯代码实现圆角主要有3种方法:
第一种:CSS3圆角
#chaomao{ border-radius:2px 2px 2px 2px; } |
上面代码的意思是左上、右上、右下、右下分别2px的圆角
当然也可以简写:border-radius:2px
方向是从左上到左下逆时针
也可以分别指定
#chaomao{ border-top-left-radius:4px 2px; border-top-right-radius:3px 4px; border-bottom-right-radius:6px 2px; border-bottom-left-radius:3px 4px; } |
意思很简明
火狐等浏览器也支持自己的私有圆角属性
Firefox支持border-radius(圆角):-moz-border-radius:2px
webkit内核的Safari和Chrome支持border-radius(圆角):-webkit-border-radius:2px
Opera支持border-radius(圆角):border-radius:2px
CSS3实现圆角最简单了,可惜IE6-8不支持
第二种:用CSS+html代码
百度知道的首页圆角就是用这种方法实现的
有点:兼容所有浏览器,
缺点:需要添加额外的HTML标签,维护比较麻烦
实现原理是利用多个空层,上面一层比下面少1px,从而使边角看起来是一个圆弧状
HTML代码:
<div> <strong class = "b1" ></strong> <strong class = "b2" ></strong> <strong class = "b3" ></strong> <strong class = "b4" ></strong> <div class = "content" >文字内容</div> </div> |
CSS代码
b 1 ,.b 2 ,.b 3 ,.b 4 ,.b 5 ,.b 6 ,.b 7 ,.b 8 { height : 1px ; font-size : 1px ; overflow : hidden ; display : block ; } .b 1 ,.b 8 { margin : 0 5px ; } .b 2 ,.b 7 { margin : 0 3px ; border-right : 2px solid ; border-left : 2px solid ; } .b 3 ,.b 6 { margin : 0 2px ; border-right : 1px solid ; border-left : 1px solid ; } .b 4 ,.b 5 { margin : 0 1px ; border-right : 1px solid ; border-left : 1px solid ; height : 2px ; } |
第三种:利用jQuery圆角插件代码实现圆角
优点:兼容所有浏览器
缺点:需要使用jQuery插件
这是一个jQuery插件,使用的时候,需要jQuery文件一起,使用方法很简单
$("#chaomao").corner("5px")
它就实现了id值问哦chaomao的元素,5px的圆角
jQuery圆角插件
纯代码实现CSS圆角的更多相关文章
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- 大神写的一个纯CSS圆角框,膜拜!(支持IE9一下的低版本)
留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 兼容性很好的纯css圆角
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- CSS圆角进化论
CSS圆角发展过程 大致经历了3个阶段,包括: 背景图片实现圆角 CSS2.0+标签模拟圆角 CSS3.0圆角属性(border-radius属性)实现圆角 ☛背景图片实现圆角:==使用背景图片实现 ...
- 心跳(纯代码制作心形,animation动画)
思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body> <div></div> </ ...
- CSS圆角效果
看了院子里一篇关于CSS圆角技巧的文章,试了一下,觉得很好,贴出练习的代码.优秀文章链接: http://www.cnblogs.com/luluping/archive/2010/06/26/176 ...
- CSS圆角样式
CSS圆角: /*纯css,设置图片圆角*/ #top2 { margin-left:20px; padding:10px; width:600px; height:300px; border: 5p ...
- iOS回顾笔记( 01 )-- XIB和纯代码创建应用的对比
header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...
- 使用Java纯代码实现MySQL的连接
建立数据库 1. 点击连接-->MySQL: 输入连接名 . 主机名/IP地址 .端口 .用户名.密码(没有密码就省略),然后点击确定,建立的表格是灰色表示关闭状态,双击开启 2. 重新创建 ...
随机推荐
- HDU 3743 Frosh Week(归并排序求逆序数)
归并排序求逆序数 #include <iostream> #include <cstdio> using namespace std; #define maxn 1000005 ...
- ajax编程**
ajax 编程 *step1获得 XmlHttpRequest 对象.该对象由浏览器提供,但是该类型并没有标准化.ie 和其它浏览器不同,其它浏览器都支持该类型,而 ie 不支持. function ...
- HDU 1815 Building roads
二分答案 + 2-SAT验证 POJ 稳过,HDU C++ 超时,G++ 550ms左右AC #include<cstdio> #include<cstring> #inclu ...
- Arduino IDE 添加DHT11传感器第三方库的方法
由于Arduino本身没有DHT 11温湿度传感器的的头文件,单有第三方的库可以给我门使用.方法如下: Step 1:如果你已经下载了最新版的Arduino IDE就可以使用其自带的库管理器和版型管理 ...
- 树列复选框Extjs
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- WebDriver(Selenium2) 根据新窗口title切换窗口
http://uniquepig.iteye.com/blog/1559321 在webdriver官方的api中,切换窗口的方法提供的参数是nameOrHandle. 引用 http://uniqu ...
- 写自己的一个pdo数据库操作框架
http://stackoverflow.com/questions/20669850/pdo-database-abstraction-layer-with-multiple-queries-in- ...
- 重启OpenStack服务步骤
[重启neutron服务] 控制节点:service openstack-nova-api restartservice openstack-nova-scheduler restartservice ...
- MAC 10.10解决 PHP GD库的问题
1. http://yangjunwei.com/a/1570.html 2. http://php-osx.liip.ch
- typedef和block
为block类型对象取别名 1.没有使用typedef的情况 int (^block_add)(int, int) = ^(int value1, int value2) { return value ...