`
deng131
  • 浏览: 673542 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

CSS中border实现圆角效果

CSSWordPressITeyeBlogHTML 
阅读更多
重要的是其实现的原理，明白原理后就可以自由的发挥你的想象了，不用多说，直接上代码： 
<!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/

分享到：
| CSS中border实现三角效果
评论
发表评论

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

相关推荐

    用js实现css3效果的圆角方法

    随着CSS3的普及，我们可以直接通过CSS的`border-radius`属性轻松实现圆角效果。然而，有些浏览器可能不支持CSS3，或者在某些特定情况下，我们需要用JavaScript来动态调整圆角。本文将探讨如何用JavaScript来实现CSS3...

    用CSS实现无图片圆角效果

    CSS3引入了`border-radius`属性，它允许我们直接设置元素边框的四个角落的半径，从而实现圆角效果。语法如下： ```css element { border-radius: top-left-radius top-right-radius bottom-right-radius bottom-...

    HTML加CSS实现圆角效果

    首先，我们需要理解 CSS 的边框半径属性（border-radius），这是实现圆角效果最直接的方法。`border-radius` 属性允许我们指定元素四个角落的圆角半径，可以分别设置上左、上右、下右和下左四个角的半径，也可以统一...

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

    在IT行业中，CSS3是 Cascading Style Sheets 的第三版本，带来了许多令人兴奋的新特性，其中包括 `border-radius`，它使得我们可以轻松地为HTML元素添加圆角效果，无需使用图像或复杂的CSS技巧。然而，这个特性在...

    div+css实现圆角导航菜单的效果

    本文将深入探讨如何使用`div+css`来实现具有圆角效果的导航菜单。 首先，`div`是HTML中的一个块级元素，它可以被用作容器，用于组织页面内容。在创建导航菜单时，`div`可以用来包裹整个菜单或者单独的菜单项。例如...

    CSS 实现立体效果 圆角

    本教程将深入探讨如何利用CSS实现立体效果和圆角，为网页增添更多视觉吸引力。 首先，让我们从CSS的圆角效果开始。在CSS3之前，创建圆角边框需要复杂的图片切片和背景定位技巧。但自从CSS3引入了`border-radius`...

    用css实现圆角效果

    当我们谈论"用CSS实现圆角效果"时，我们指的是如何使用CSS来让元素的边角变得圆润，而不是传统的尖锐90度角。这个功能对于创建现代、友好的用户界面至关重要。 CSS3是CSS的一个重要版本，引入了许多新的特性和功能...

    CSS制作圆角效果

    首先，我们了解CSS中实现圆角效果的主要属性——`border-radius`。这个属性允许我们将元素的边框转换为圆形或椭圆形，从而实现圆角效果。`border-radius`的语法相当直观，可以单独对每个角落设置值，也可以统一设置...

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

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

    纯css实现边框圆角效果

    纯CSS实现边框圆角效果是现代Web开发中的基础技能，无需依赖图片切片或JavaScript插件，只需通过CSS3的特定属性就能轻松实现。本教程将深入探讨如何使用CSS来创建具有圆角边框的元素。 首先，我们需要了解CSS3中的`...

    CSS+JS实现的圆角边框TAB选项卡滑动门代码

    1. **CSS圆角边框**：CSS3的`border-radius`属性用于设置元素边框的圆角半径，允许我们创建不同大小的圆角效果。例如，`border-radius: 10px;`将为元素添加一个10像素的圆角。同时，还可以分别设置四个角的圆角大小...

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

    CSS3 中的 border-radius 属性可以生成圆角边框，无需使用图片背景图案，从而简化了网页设计的过程。下面对 border-radius 属性进行详细介绍。 一、border-radius 属性 border-radius 属性是 CSS3 中用于生成圆角...

    css+div漂亮的圆角tab选项卡

    在本主题“css+div漂亮的圆角tab选项卡”中，我们将深入探讨如何利用CSS和HTML创建具有美观圆角效果的tab选项卡。 首先，HTML结构是实现tab选项卡的基础。一个基本的tab选项卡结构通常包含一个容器（如`&lt;div&gt;`），...

    用CSS样式定义的圆角表格

    通过分析提供的文件信息，我们可以...虽然现代浏览器已经支持更简洁的`border-radius`属性来实现圆角效果，但对于早期版本的浏览器或需要兼容性更好的解决方案来说，这种基于嵌套元素的方法仍然具有一定的参考价值。

    CSS3实现圆角阴影渐变效果兼容IE等浏览器

    在现代网页设计中，CSS3已经成为了不可或缺的一部分，它提供了许多增强视觉效果的功能，比如圆角、阴影和渐变。本文将深入探讨如何利用CSS3实现圆角、阴影和渐变效果，并确保这些效果在包括IE在内的主流浏览器中都能...

    用CSS实现圆角框框

    本文将详细介绍如何仅使用CSS来实现圆角框的效果，以及提供两种不同的方法来帮助理解这一技术的应用场景与实现方式。 #### 知识点详解 ##### CSS圆角框基础知识 在网页设计中，为元素添加圆角边框是一种常见的美化...

    css实现无图圆角效果.rar

    在CSS世界中，实现无图圆角效果是一个重要的技术，它允许我们为元素添加圆角而不依赖于图像。这种技术的出现得益于CSS3的引入，它提供了新的样式属性，让我们可以方便地创建出各种形状和效果，而无需额外的图片资源...

    div css圆角代码各种圆角表格_圆角边框css圆角

    总结来说，通过熟练掌握 `div` 和 `CSS` 的 `border-radius` 属性，我们可以轻松地实现各种圆角设计，包括圆角边框的 `div` 元素和圆角表格。同时，理解表格结构和 `display` 属性的重要性，有助于我们在实际项目中...

Magicbox
Global site tag (gtag.js) - Google Analytics