css实现圆角,CSS圆角实现详解

上次在群里有同学提出这样的问题,因为之前一直在用传统的Div,所以当时没能回答出来,之后经过Google了相关资料后,总结并实践了各种实现方法,现在将它写了来和大家分享一下,如果你是一个Div+Css老鸟并且已经熟练掌握,那么请直接跳过本文(您的时间一定很宝贵吧,呵呵!),如果你之前没用过并且也不会,那么请认真、耐心的看完这篇文章,我保证,你肯定能做到。以下几种方法经IE6、Ie7、Firefox... [阅读全文]

css圆角,CSS圆角效果,支持IE,FF,Chrome,Sa...

注:本文纯属转载 出处:http://www.oschina.net/bbs/thread/15330 先说一下Firefox的圆角属性: -moz-border-radius: {1,4} | inherit 如果你想设置四个角都是一样圆角的话,可以像这样子直接设置-moz-border-radius:5px; 也可以单独设置元素的上左、上右、下右、下左四个角的值,分别用-moz-bo... [阅读全文]

css圆角,CSS border三角、圆角图形生成技术详解

点评:利用CSS的border属性可以生成一些图形,例如三角或是圆角。 一、前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角。纯粹的CSS2的内容,没有兼容性的问题,我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理,以及实例。我觉得此技术相当实用的,故本文再次简单叙述一下,另外,本文还将展示可能并不为众人所知的CSS b... [阅读全文]

css圆角背景,CSS技巧之圆角背景与三角形实现方法

点评:前端开发中两个很不错的小技巧, CSS三角形与圆角背景. 的确, 它们都可以通过图片来实现, 但, 抛开用代码实现可以减小图片加载量不说, 当你遇到三角形或圆角背景下还有一层非纯色背景时, 你又不得不考虑IE6 png兼容问题, 嗯, IE6,万恶之源. 此时, CSS三角形及圆角背景将是上佳选择. 查看演示 !DOCTYPE HTML html head meta charset... [阅读全文]

css圆角背景,CSS技巧之圆角背景与三角形实现方法

点评:前端开发中两个很不错的小技巧, CSS三角形与圆角背景. 的确, 它们都可以通过图片来实现, 但, 抛开用代码实现可以减小图片加载量不说, 当你遇到三角形或圆角背景下还有一层非纯色背景时, 你又不得不考虑IE6 png兼容问题, 嗯, IE6,万恶之源. 此时, CSS三角形及圆角背景将是上佳选择. 查看演示 !DOCTYPE HTML html head meta charset... [阅读全文]

css圆角,魔哥css圆角实现代码 (代码精简,完全自适应)

点评:魔哥css圆角实现代码,结合了图片的实现方法,兼容性好。所用到的图片: style type="text/css" body,p,div {margin:0;padding:0;} .Box {margin:10px auto;width:500px;} /*淘宝的圆角方法*/ .R-1-T,.R-1-B {height:6px;position:relative;backgroun... [阅读全文]

css圆角,魔哥css圆角实现代码 (代码精简,完全自适应)

点评:魔哥css圆角实现代码,结合了图片的实现方法,兼容性好。所用到的图片: style type="text/css" body,p,div {margin:0;padding:0;} .Box {margin:10px auto;width:500px;} /*淘宝的圆角方法*/ .R-1-T,.R-1-B {height:6px;position:relative;backgroun... [阅读全文]

css圆角输入框,CSS 圆角框进行JS封装版

点评:本来前三篇文章已经将CSS圆角框讲解完毕,但从网友反馈中,都说到不好使用,因此有了这篇文章,本文主要是将前面的结果总结修订后进行JS封装,方便调用。前序:本来前三篇文章已经将CSS圆角框讲解完毕,但从网友反馈中,都说到不好使用,因此有了这篇文章,本文主要是将前面的结果总结修订后进行JS封装,方便调用。在本次封装中,增加了对真正img标签引用的图片实现圆角化,之前的圆角图片大多是基于背景图片的... [阅读全文]

css圆角输入框,CSS 圆角框进行JS封装版

点评:本来前三篇文章已经将CSS圆角框讲解完毕,但从网友反馈中,都说到不好使用,因此有了这篇文章,本文主要是将前面的结果总结修订后进行JS封装,方便调用。前序:本来前三篇文章已经将CSS圆角框讲解完毕,但从网友反馈中,都说到不好使用,因此有了这篇文章,本文主要是将前面的结果总结修订后进行JS封装,方便调用。在本次封装中,增加了对真正img标签引用的图片实现圆角化,之前的圆角图片大多是基于背景图片的... [阅读全文]

ulli表格,CSS 用ul li做圆角表格

点评:今天用ul li做个圆角表格,圆角用了背景图片。这两天和表格纠结上了...工作需要做表格,但是不想重复相同的方法,前两天用dl dt dd,今天用ul li做个圆角表格,圆角用了背景图片。再次声明:数据输出型的表格不推荐使用div+css。测试浏览器:IE6\IE7\IE8\FF3.0\Opera 9.6 !doctype html public "-//w3c//dtd html 4.0... [阅读全文]

ulli表格,CSS 用ul li做圆角表格

点评:今天用ul li做个圆角表格,圆角用了背景图片。这两天和表格纠结上了...工作需要做表格,但是不想重复相同的方法,前两天用dl dt dd,今天用ul li做个圆角表格,圆角用了背景图片。再次声明:数据输出型的表格不推荐使用div+css。测试浏览器:IE6\IE7\IE8\FF3.0\Opera 9.6 !doctype html public "-//w3c//dtd html 4.0... [阅读全文]

css实现圆角,百度有啊 CSS圆角实现代码

点评:百度有啊的 CSS 圆角写法,原理和《一张图片实现圆角》差不多,也是用背景定位实现的。看代码吧: XHTML 代码:复制代码代码如下:... [阅读全文]

css实现圆角,百度有啊 CSS圆角实现代码

点评:百度有啊的 CSS 圆角写法,原理和《一张图片实现圆角》差不多,也是用背景定位实现的。看代码吧: XHTML 代码:复制代码代码如下:... [阅读全文]

纯css圆角,纯css 圆角实现代码

点评:不用图片,只用css制作圆角的另一方法。html 复制代码代码如下:... [阅读全文]

纯css圆角,纯css 圆角实现代码

点评:不用图片,只用css制作圆角的另一方法。html 复制代码代码如下:... [阅读全文]

圆角名片制作教程,CSS Sprites 圆角制作教程

点评:初步介绍 当然,我知道现在有成千上万个关于 用CSS处理圆角 的教程,但不管怎么说,我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是,这篇教程彻底地应用高级CSS技术,但是,我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用初步介绍 当然,我知道现在有成千上万个关于 用CSS处理圆角 的教程,但不管怎么说,我仍然想把这篇文章展示给您。也希望您会发... [阅读全文]

css圆角输入框,CSS实现绝对的完美圆角框

点评:网页制作Webjx文章简介:本文探讨的是圆角框的终极解决方案,其核心关键词是“圆滑、完美、兼容、重用性、语义”,这些技术都是收集目前网络上最流行的做法。纵观种种方法,各有其优势,请针对不同的环境分别使用。 导言: 本文探讨的是圆角框的终极解决方案,其核心关键词是“圆滑、完美、兼容、重用性、语义”,这些技术都... [阅读全文]

圆角名片制作教程,CSS Sprites 圆角制作教程

点评:初步介绍 当然,我知道现在有成千上万个关于 用CSS处理圆角 的教程,但不管怎么说,我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是,这篇教程彻底地应用高级CSS技术,但是,我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用初步介绍 当然,我知道现在有成千上万个关于 用CSS处理圆角 的教程,但不管怎么说,我仍然想把这篇文章展示给您。也希望您会发... [阅读全文]

css圆角输入框,CSS实现绝对的完美圆角框

点评:网页制作Webjx文章简介:本文探讨的是圆角框的终极解决方案,其核心关键词是“圆滑、完美、兼容、重用性、语义”,这些技术都是收集目前网络上最流行的做法。纵观种种方法,各有其优势,请针对不同的环境分别使用。 导言: 本文探讨的是圆角框的终极解决方案,其核心关键词是“圆滑、完美、兼容、重用性、语义”,这些技术都... [阅读全文]

css圆角,用Illustratro轻松绘制卡可爱圆角胖星星

点评:本文中我们请bones为我们介绍Illustrator绘制超级可爱的圆角胖星星,用到的都是很基础的工具。      用Illustratro绘星星首先应该想到星形工具,我们就用这个工具随意在画布上拉出一个星形的形状来。   因为上一次我绘制过8边形,所以拉出来是下图这个样子,可本文中我们请bones为我们介绍Illustrator绘制超级可爱的圆角胖星星,用到的都是很基础的工具。  ... [阅读全文]

添加图像处理设备,四步为图像添加圆角网格

效果如下:1.新建,尺寸是每个小格的大小(我的是50*60),使用圆角矩形工具绘制圆角路径,转换路径为选区,填充黑色,然后ctrl+i反色。2.点击编辑菜单-定义图案3.打开要编辑的图像,复制层;在该层下面新建层,新层上充添白色4.在复制层上添加蒙板,激活蒙板,shift+f5打开填充面板,使用刚才准备好的图案,确定。完成。 ... [阅读全文]

css实现圆角,用CSS实现图片圆角化处理

还是先看最终效果图吧: 看到了吧,这就是用纯CSS实现的圆角化图片,为了能看到透明化的效果,我特意应用了一个背景图片,你可以下载本模型到你的电脑中,随意伸缩窗口的大小,看看外圆角是否是透明的。 有了这种效果,你再也不愁给每一张图片作圆角的工作,这种效果在一些图片类的演示页面中经常见到,特别适用那些图片比较多的列表中。怎么样,效果还可以吧! 好了,我们来看看它的实现机制吧!... [阅读全文]

cdr圆角三角形,CSS技巧之圆角背景与三角形

前端开发中两个很不错的小技巧, CSS三角形与圆角背景. 的确, 它们都可以通过图片来实现, 但, 抛开用代码实现可以减小图片加载量不说, 当你遇到三角形或圆角背景下还有一层非纯色背景时, 你又不得不考虑IE6 png兼容问题, 嗯, IE6,万恶之源. 此时, CSS三角形及圆角背景将是上佳选择.  查看演示: 点此查看DEMO  CSS圆角背景  通过改变层叠元素的margin值实现圆角效果.... [阅读全文]

css圆角:用Illustratro轻松绘制卡可爱圆角胖星星

点评:本文中我们请bones为我们介绍Illustrator绘制超级可爱圆角胖星星用到都是很基础工具      用Illustratro绘星星首先应该想到星形工具我们就用这个工具随意在画布上拉出个星形形状来   上次我绘制过8边形所以拉出来是下图这个样子可本文中我们请bones为我们介绍Illustrator绘制超级可爱圆角胖星星用到都是很基础工具      用Illustratro绘星星... [阅读全文]

illustratro:用Illustratro轻松绘制卡可爱圆角胖星星

本文中我们请bones为我们介绍Illustrator绘制超级可爱圆角胖星星用到都是很基础工具      用Illustratro绘星星首先应该想到星形工具我们就用这个工具随意在画布上拉出个星形形状来  上次我绘制过8边形所以拉出来是下图这个样子可能和你拉出角数不样没关系改改设置就好      按下键盘上“↓”和“↑”来调节星形边... [阅读全文]

css圆角表格:html+css做圆角表格

style type="text/CSS" div#nty{margin:0;background:#9BD1FA} p {padding:10px} div.rtop {display:block;background:#fff} div.rtop div {display:block;height:1px;overflow:hidden;background... [阅读全文]

css圆角:真正的圆角[CSS]

要一个宽度不固定的框,事情变得有些复杂了。宽度不固定,就意味着这个框在水平和垂直方向都有足够灵活的变化。   为什么说这更难一些呢?因为它需要对四张图片的合适安置——每个圆角用一张。每个圆角都要独立出来,以便框能够在各个方向伸展。于是,四张图片就意味着需要四个HTML对象来作为背景图片的载体。   有一些实现办法包括在样式表中使用“生成内容”,即使用:before和:after伪类来为单独的一个对... [阅读全文]

css图片圆角:css 无图片圆角

STYLE type=text/css body{padding: 20px;background-color: #FFF; font: 100.01% \"Trebuchet MS\",Verdana,Arial,sans-serif} h1,h2,p{margin: 0 10px} h1{font-size: 250%;color: #FFF} h2{font-size: 200%;color... [阅读全文]

css圆角:css圆角之有序列表dl、无序列表ul如何实现?

  我们常可以看到许多列表或文章段落是圆角在传统制作中我们往往通过背景图片来营造出圆角效果运用div+css进行网页布局我们应该让编码更有语义结构更加简单更重要是可以适应宽度和高度变化有序列表dl、无序列表ul圆角我们可以仅通过 4个角图片来实现我们看下面这张图片:\" border=\"0\" alt=\"\"/  我们将圆角多出部分设置成“背景色... [阅读全文]
1 共1条 分1页