我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了。

纯代码实现圆角主要有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代码

b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{
    height:1px;
    font-size:1px;
    overflow:hidden;
    display:block;
}
.b1,.b8{
    margin:0 5px;
}
.b2,.b7{
    margin:0 3px;
    border-right:2px solid;
    border-left:2px solid;
}
.b3,.b6{
    margin:0 2px;
    border-right:1px solid;
    border-left:1px solid;
}
.b4,.b5{
    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圆角的更多相关文章

  1. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  2. 大神写的一个纯CSS圆角框,膜拜!(支持IE9一下的低版本)

    留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. 兼容性很好的纯css圆角

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  4. CSS圆角进化论

     CSS圆角发展过程 大致经历了3个阶段,包括: 背景图片实现圆角 CSS2.0+标签模拟圆角 CSS3.0圆角属性(border-radius属性)实现圆角 ☛背景图片实现圆角:==使用背景图片实现 ...

  5. 心跳(纯代码制作心形,animation动画)

    思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body> <div></div> </ ...

  6. CSS圆角效果

    看了院子里一篇关于CSS圆角技巧的文章,试了一下,觉得很好,贴出练习的代码.优秀文章链接: http://www.cnblogs.com/luluping/archive/2010/06/26/176 ...

  7. CSS圆角样式

    CSS圆角: /*纯css,设置图片圆角*/ #top2 { margin-left:20px; padding:10px; width:600px; height:300px; border: 5p ...

  8. iOS回顾笔记( 01 )-- XIB和纯代码创建应用的对比

    header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...

  9. 使用Java纯代码实现MySQL的连接

      建立数据库 1. 点击连接-->MySQL: 输入连接名 . 主机名/IP地址 .端口 .用户名.密码(没有密码就省略),然后点击确定,建立的表格是灰色表示关闭状态,双击开启 2. 重新创建 ...

随机推荐

  1. HDU 3743 Frosh Week(归并排序求逆序数)

    归并排序求逆序数 #include <iostream> #include <cstdio> using namespace std; #define maxn 1000005 ...

  2. ajax编程**

    ajax 编程 *step1获得 XmlHttpRequest 对象.该对象由浏览器提供,但是该类型并没有标准化.ie 和其它浏览器不同,其它浏览器都支持该类型,而 ie 不支持. function ...

  3. HDU 1815 Building roads

    二分答案 + 2-SAT验证 POJ 稳过,HDU C++ 超时,G++ 550ms左右AC #include<cstdio> #include<cstring> #inclu ...

  4. Arduino IDE 添加DHT11传感器第三方库的方法

    由于Arduino本身没有DHT 11温湿度传感器的的头文件,单有第三方的库可以给我门使用.方法如下: Step 1:如果你已经下载了最新版的Arduino IDE就可以使用其自带的库管理器和版型管理 ...

  5. 树列复选框Extjs

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. WebDriver(Selenium2) 根据新窗口title切换窗口

    http://uniquepig.iteye.com/blog/1559321 在webdriver官方的api中,切换窗口的方法提供的参数是nameOrHandle. 引用 http://uniqu ...

  7. 写自己的一个pdo数据库操作框架

    http://stackoverflow.com/questions/20669850/pdo-database-abstraction-layer-with-multiple-queries-in- ...

  8. 重启OpenStack服务步骤

    [重启neutron服务] 控制节点:service openstack-nova-api restartservice openstack-nova-scheduler restartservice ...

  9. MAC 10.10解决 PHP GD库的问题

    1. http://yangjunwei.com/a/1570.html 2. http://php-osx.liip.ch

  10. typedef和block

    为block类型对象取别名 1.没有使用typedef的情况 int (^block_add)(int, int) = ^(int value1, int value2) { return value ...