`
esffor
  • 浏览: 1367307 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

无图片实现圆角框

CSSHTML 
阅读更多

<HTML>
<HEAD>
<TITLE></TITLE>

</head>

<BODY >
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>


</BODY>
</HTML> 



分享到：
| spring mvc 使用Freemarker模板
评论
发表评论

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

相关推荐

    无图片实现圆角框，不需要加入背景图片

    可以实现圆角框背景 &lt;title&gt;css圆角效果 ; charset=gb2312"&gt; ... 无图片实现圆角框 &lt;br&gt; &lt;b class="rbottom"&gt;&lt;b class="r4"&gt;&lt;/b&gt;&lt;b class="r3"&gt;&lt;/b&gt;&lt;b class="r2"&gt;&lt;/b&gt;&lt;b class="r1"&gt;&lt;/b&gt;&lt;/b&gt; &lt;/html&gt;

    易语言Exdui无锯齿自定义圆角图片框

    这个模块的独特之处在于其利用了Gdip（即GDI+，图形设备接口的增强版）的纹理画刷功能，来实现圆角效果，并确保图片在显示时没有锯齿，从而提供更好的视觉体验。 GDI+是Windows操作系统中用于图形处理的一个强大...

    css 图片圆角边框的效果

    通过以上步骤，我们就可以使用CSS和图片实现圆角边框效果。然而，这种方法在现代浏览器中已经不再常用，因为CSS3的`border-radius`属性可以更简单地创建圆角边框，而且兼容性更好。例如： ```css .rounded-border { ...

    圆角框实现

    在HTML和CSS中实现圆角框，我们可以采用多种方法，其中一种是利用背景图像。本篇文章将详细介绍如何通过背景图像来创建固定宽度和灵活宽度的圆角框。 一、固定宽度的圆角框 1. CSS边框图像（border-image）属性：...

    CSS实现绝对的完美圆角框

    在网页设计中，实现圆角框是提升用户体验和视觉效果的重要手段。圆角框因其美观性和柔和的视觉感受，被广泛应用于网页、博客等界面设计中。然而，要让圆角框在各种浏览器中都能完美呈现，对于前端开发者来说是一项...

    圆角框的制作

    首先，我们了解CSS中的`border-radius`属性，它是实现圆角框的核心。`border-radius`允许我们为元素的每个角落指定一个半径值，从而让原本直角的边框变为圆角。例如，如果我们想要创建一个4像素圆角的方框，我们可以...

    JS实现图片改成圆角效果

    为了实现圆角图片效果，我们通常需要将图片放入一个带有`border-radius`的容器中。 ```html ``` 在CSS中，我们可以这样设置容器的样式： ```css .rounded-image-container { width: 200px; /* 设置宽度，...

    灵活的圆角框

    在现代Web开发中，实现圆角框主要依赖于CSS3的`border-radius`属性。这个属性允许开发者为元素的边框设置不同的圆角半径，从而创造出各种各样的圆角效果。 描述中的“NULL”没有提供额外信息，所以我们主要依据标题...

    unity 制作圆角图片添加边框的实用Demo

    圆角图片边框Shader（Unity Package） 这个Unity Shader包提供了一种简单而有效的方法来为图片添加圆角和边框效果。通过使用这个Shader，你可以轻松地为任何2D图像创建平滑的圆角效果，并在需要时添加自定义颜色和...

    CSS实现绝对的完美圆角框.docx

    在网页设计中，圆角框因其优雅的外观而备受青睐，然而在不同浏览器间实现圆角框的兼容性却一直是开发者面临的一大挑战。本文将详细介绍四种主流的CSS圆角框实现方法，旨在提供一个全面的解决方案。 **第一种：无...

    js圆角框组件(图片)

    在JavaScript的世界里，实现圆角框效果是一种常见的需求，尤其在网页设计中，圆角框可以为用户界面增添一份柔和与现代感。本知识点将详细探讨如何使用纯JavaScript或者借助CSS3来创建圆角框组件，并结合提供的"demo...

    圆角框栏目制作

    首先，我们需要理解圆角框是通过CSS（Cascading Style Sheets）中的`border-radius`属性来实现的。这个属性允许我们为元素的每个角落设置独立的圆角半径，从而创建出圆形或椭圆形的边框效果。例如，如果我们想让一个...

    圆角图片（可带边框）

    实现圆角图片的方法有很多种，但最常见的是通过编程方式动态处理。在Android中，可以使用自定义View或BitmapShader来实现。例如，`RoundedImageView`是一个流行的库，它扩展了Android的`ImageView`类，提供了设置...

    基本的圆角效果这是最基本的圆角框，无图片，四个圆角全部采用标签绘制，兼容很多中浏览器，无HACK

    在早期的Web开发中，由于浏览器之间的兼容性问题，实现圆角效果往往需要借助图片或者JavaScript库，但这会增加页面加载时间和复杂性。随着CSS3的出现，这个问题得到了很好的解决。 描述中提到的“无图片，四个圆角...

    最简洁图片圆角边框-无需额外标签

    标题 "最简洁图片圆角边框-无需额外标签" 暗示了这个主题是关于在HTML和CSS中实现图片的圆角边框效果，而且方法简单，不需要使用额外的HTML标签。通常，CSS3提供了`border-radius`属性来创建圆角效果，但这可能不...

    安卓头像制作图片圆角剪裁相关-android以不规则图片为边框切割另外的图片.rar

    4. **使用第三方库**: 如`android-maskable-imageview`、`roundedimageview`等，这些库提供了更简单的接口来实现圆角图片。 压缩包内的"JavaApk源码说明.txt"可能包含了关于源码的简要介绍和使用方法，这部分源码...

    Android 自定义imageview实现图片圆角

    在Android开发中，为了满足各种视觉设计需求，我们经常需要对ImageView进行自定义，以便实现如图片圆角、圆形图片或椭圆形图片的效果。本文将详细介绍如何在Android中通过自定义ImageView来实现这些功能，无需引入...

    javascript实现的圆角提示框

    在这个圆角提示框的实现中，JavaScript可能被用来监听用户的鼠标悬停事件，当鼠标停留在特定元素上时，显示提示框；当鼠标离开时，隐藏提示框。 ```javascript // 获取要添加提示框的元素 var element = document....

    用CSS实现无图片圆角效果

    在网页设计中，圆角效果可以为用户界面增添柔和与现代感，但早期的Web设计中，实现圆角通常依赖于图像。随着CSS技术的发展，我们不再需要借助图片就能轻松创建圆角效果。本篇文章将深入探讨如何使用CSS来实现无图片...

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