`

html圆角解决方案~~

    博客分类:
  • web
阅读更多

圆角的jquery插件,效果很多,网址

http://jquery.malsup.com/corner/

 

还有个手工写的

纯css解决方案的网站地址 http://www.spiffycorners.com/

在如上的页面里面可以选择颜色来生成如下代码:

 

 

<style type="text/css">
.spiffy{display:block}
.spiffy *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#56E69E}
.spiffy1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #b0eecf;
  border-right:1px solid #b0eecf;
  background:#7de9b3}
.spiffy2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #e5f3ec;
  border-right:1px solid #e5f3ec;
  background:#74e8ae}
.spiffy3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #74e8ae;
  border-right:1px solid #74e8ae;}
.spiffy4{
  border-left:1px solid #b0eecf;
  border-right:1px solid #b0eecf}
.spiffy5{
  border-left:1px solid #7de9b3;
  border-right:1px solid #7de9b3}
.spiffyfg{
  background:#56E69E}
</style>

 

<div>
  <b class="spiffy">
  <b class="spiffy1"><b></b></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy3"></b>
  <b class="spiffy4"></b>
  <b class="spiffy5"></b></b>

  <div class="spiffyfg">
    <!-- content goes here -->
  </div>

  <b class="spiffy">
  <b class="spiffy5"></b>
  <b class="spiffy4"></b>
  <b class="spiffy3"></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy1"><b></b></b></b>
</div>

 

分享到:
评论

相关推荐

    详解html2canvas截图不能截取圆角图片的解决方案

    如果图片背景复杂,或者圆角大小动态变化,可能需要更复杂的解决方案,例如使用CSS clip-path或者SVG等技术。同时,这种方法也要求遮罩图片的尺寸与原始图片完全匹配,以确保截图结果的准确性。 总的来说,...

    解决IE浏览器图片圆角

    3. **JavaScript库**:像jQuery Corner等JavaScript库提供了跨浏览器的圆角解决方案。这些库通过动态修改DOM元素的样式来模拟圆角,但在性能和加载速度上可能不如其他方法理想。 4. **VML(Vector Markup Language...

    圆角框jquery

    在网页设计中,圆角框是一种常见的视觉元素,它...一种常用的解决方案是使用 jQuery UI,它包含了一个名为 "Corner" 的插件,可以为元素添加圆角效果。首先,你需要在项目中引入 jQuery 和 jQuery UI 的库: ```html ...

    html2canvas关于图片不能正常截取的解决方案

    但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来。 官方文档 在项目里面操作了半天未果,google了半天未果。此时有些许绝望。突然想到了,为什么不去它的 官网...

    vml实现圆角表格

    注意,由于VML是针对IE的解决方案,所以对于其他浏览器,你可能需要使用CSS3的`border-radius`属性来实现圆角。为了实现跨浏览器兼容性,你可以使用JavaScript库如jQuery或Modernizr,根据浏览器类型动态地应用适当...

    html5+css3圆角图文展示卡片层叠滑动切换特效.zip

    总的来说,这个压缩包提供了一个基于HTML5、CSS3和jQuery的动态展示卡片的完整解决方案。开发者可以通过学习和修改这个示例,灵活地应用到自己的项目中,实现个性化的图文展示效果。对于初学者,这是一个很好的学习...

    关于圆角的简单做法效果(Html)

    这种方法适用于初学者和经验丰富的开发者,旨在提供一个快速且直观的解决方案。 首先,我们要理解相对定位和绝对定位的概念。相对定位是相对于元素自身位置进行定位,设置`position: relative;`后,可以通过`top`, ...

    用CSS样式定义的圆角表格

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

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

    “兼容所有浏览器,无HACK”意味着这个圆角解决方案已经过优化,可以在多种浏览器上正常工作,包括较旧版本的Internet Explorer(通常需要使用特定的前缀,如 `-webkit-`,`-moz-`,`-ms-` 等,来确保兼容性)。...

    jquery实现圆角实例

    因此,除非有特别的需求,否则建议优先考虑 CSS3 解决方案。 为了创建背景的圆角,我们通常需要将背景色或图片应用到一个带有圆角的元素上。这可以通过以下方式实现: ```css .yourElementClass { background-...

    圆角表格的实现

    早期的解决方案是通过添加带有圆角的背景图片来模拟圆角效果,但这增加了HTTP请求的数量,影响了页面加载速度。 现在,我们将用JavaScript来实现这一效果。JavaScript可以通过操作DOM(文档对象模型)来改变HTML...

    curvycorner——纯javascript的圆角边框设计

    本篇文章将重点探讨"CurvyCorners"这一纯JavaScript实现的圆角边框解决方案。** **CurvyCorners** 是一个轻量级的JavaScript库,专为那些希望在不支持CSS3 border-radius属性的浏览器中实现圆角效果的开发者而设计...

    让所有IE支持HTML5的解决方案

    标题 "让所有IE支持HTML5的解决方案" 指向的是如何使老旧的Internet Explorer(IE)浏览器能够兼容和正确渲染HTML5的新特性。在HTML5出现之前,IE浏览器特别是较旧版本,如IE6、IE7和IE8,对新标准的支持非常有限,...

    圆角用资源

    标题“圆角用资源”和描述中提到的“低版ie下实现圆角,类css3的功能”,指的是针对这些老版本IE浏览器实现CSS3圆角边框的解决方案。 CSS3的圆角边框可以通过`border-radius`属性来实现,这使得元素的四角可以变得...

    Jquery实现圆角边框效果的源码

    但是,对于还需要兼容老版本浏览器的项目,jQuery CurvyCorners仍然是一个实用的解决方案。 总的来说,jQuery CurvyCorners插件是利用jQuery实现跨浏览器圆角边框效果的一种有效方法,它为那些不支持CSS3圆角的...

    解决IE不兼容css3圆角和阴影问题

    6. 鼓励用户升级浏览器:虽然这不是一种技术解决方案,但向用户宣传更新浏览器的好处,可以逐渐减少遇到兼容性问题的用户基数。 总的来说,解决IE对CSS3圆角和阴影的不兼容问题需要结合多种策略,根据项目需求和...

    JS实现DIV、图片圆角效果

    此外,现代浏览器已经提供了更好的跨浏览器圆角解决方案,如使用`-webkit-mask-image`和`-moz-mask-image`等前缀属性,以及CSS3的`mask`属性。结合条件语句,我们可以为不同的浏览器提供合适的圆角实现。 综上所述...

Global site tag (gtag.js) - Google Analytics