CSS中border实现圆角效果 - Thinking80s - ITeye博客

`

deng131

浏览: 662235 次
性别:
来自: 深圳

最近访客更多访客>>

CalvinLu

zhangcaiyanbeyond

RedBlood

zhangbohun

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

zhouyicang：为嘛人气不够，这么好的文章，我找了几十篇博客，才找到这篇解惑了 ...
HTML 块级元素/内联元素
young7：不错，解惑了
HTML 块级元素/内联元素
lvjin948：获取浏览器语言的完美方案。http://blog.csdn.n ...
JavaScript获取浏览器语言类型
tarena_hhh：我用了css优化工具，发现他的顺序有很大不一样？？？？？
CSS属性书写顺序及命名规则
deng131：谢谢你的提醒，是有个地方写错了
javascript事件绑定addEventListener,attachEvent

CSS中border实现圆角效果

博客分类：

stylesheet

CSS WordPress ITeye Blog HTML

阅读更多

重要的是其实现的原理，明白原理后就可以自由的发挥你的想象了，不用多说，直接上代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
.clip-top{
  border-style: dashed dashed solid dashed;
  border-color: transparent transparent red transparent ;
  border-width: 4px;
  width:200px;
  height:200px;
}
.clip-bot{
  border-style: solid dashed dashed;
  border-color: red transparent transparent;
  border-width: 4px;
  width:200px;
  height:200px;
}
.clip-center{
  background-color: red;
  width:208px; //此出宽度：内容宽度＋2＊border宽度
  height:210px;
}

</style>
</head>
<body>
<div class="container">
  <div class="clip-top"></div>
  <div class="clip-center"></div>
  <div class="clip-bot"></div>
</div>
</body>
</html>

参考：
http://kevinpeng.iteye.com/blog/1062391
http://www.zhangxinxu.com/wordpress/2010/05/css-border%E4%B8%89%E8%A7%92%E3%80%81%E5%9C%86%E8%A7%92%E5%9B%BE%E5%BD%A2%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B/

分享到：

IE6上Array不支持indexOf方法 | CSS中border实现三角效果

2011-05-27 22:42
浏览 1735
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果: 引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果

IE实现CSS3中的border-radius（圆角）: 让IE实现CSS3中的border-radius（圆角）

css3实现圆角矩形: css3实现圆角矩形使用border-radius实现圆角，兼容到IE6

css3实现圆角边框: css3中的边框一般多为矩形，也可以通过设置实现圆角边框的效果，通过border-radius:;通过设置该属性值得大小改变边框的圆角大小，从而达到自己需要的圆角边框效果

让IE6也识别CSS3-圆角效果应用border-radius: 让IE6也识别CSS3-圆角效果应用border-radius

css3教程应用css3 圆角border-radius属性制作...: css3教程应用css3 圆角border-radius属性制作...

CSS3 完美实现圆角效果: 现在使用CSS3 技术不需要图片即可实现圆角，把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性：border-radius，Firefox 和 Safari ...

CSS3+HTML5实现圆角【WEB前端】: CSS3圆角详解一、CSS3圆角的优点传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些...CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这.....

CSS3轻松实现圆角效果: 在Web前端页面实现圆角效果，CSS3帮你轻松实现，一个人人皆知的属性。 CSS3圆角的优点传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多...

css3(border-radius)边框圆角详解

jQuery圆角插件,实现兼容浏览器圆角效果: 但是这些方法在实现的过程中，总是会增加很多无谓的工作任务，而且还有可能无法做到浏览器之间的兼容性，那么就介绍一个非常简单的jQuery圆角实现效果吧，说是圆角有点小看它了，因为它可以实现的不止是圆角，看这...

CSS3中border-radius属性设定圆角的使用技巧: border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet Explorer 8及更低版本，所有的浏览器可以显示圆角。为了使样式能正确应用，需要为Webkit和Mozilla内核添加前缀。 CSS ...

CSS border三角、圆角图形生成技术详解: 我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。二、CSS border生成三角技术简介效果抢鲜下图为使用...

html中实现圆角特效的几种方法: 通常情况下，我们使用css3样式中的border-radius实现圆角效果，但是这种方法IE8.0以下版本浏览器是不支持的。但是目前使用IE8.0的用户还比较多，Windows XP系统最高支持IE8.0，还有些其他的某些Trident内核浏览器也...

CSS利用1像素空缺实现圆角效果的方法: 这里基于CSS利用1像素空缺来实现圆角效果，虽然和真正的圆角有一些细小的差别，但毕竟是用纯CSS代码实现的，执行效率高，没有用到图像资源，而且扩展性好，代码复用性高，演示中包括一个列表和一个DIV区域。...

关于css3如何实现圆角边框: css3圆角边框效果图代码 test.html 说明：由于该样式篇幅较小，将css样式与html结构写在一个页面，建议分开写！步骤一先新建一个盒子模型，为了将其居中，设置好内外边距步骤二设置宽度、高度、背景颜色 ...

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力): -webkit-border-radius：苹果；...border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。请看下面的示例代码：复制代码代码如下: <div style=”bac

纯CSS3实现圆角效果（含IE兼容解决方法）: 在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似：复制代码代码如下:.roundElement { border-radius: 10px;}上面的这句代码的作用是设置一个元素的四个角的弧度半径值都...

ie6 7 支持css3 圆角: 让ie6 /7支持css3 如border-radius等特性的插件

Global site tag (gtag.js) - Google Analytics