Tagged

圆角

Rounded corners

before

一些上流的CSS3图片样式

译自:CSS3 Image Styles 中文:一些上流的CSS3图片样式 请尊重版权,转载请注明来源,多谢~~ 直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们。不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程,讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。 先看下demo 问题 (见 demo) 看一下demo,请注意在第一行的图片中使用了border-radius和inset box-shadow。Firefox会直接在图片元素上渲染border-radius,但不会渲染inset box-shadow。chrome/safari则两者都不渲染。 解决方案 要让 border-radius 和 inset box-shadow 正常工作,解决方案就是将实际图片变作background-image. 动态方法 要想动态实现,

css3

兼容所有浏览器的CSS3圆角

原文:[ 兼容所有浏览器的CSS3圆角](http://www.qianduan.net/compatible-all-browsers-css3-rounded-corners.html) 译自:[ CSS3 rounded corners for every browser? ](http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html) 版权所有,转载请注明出处,多谢! - - - - - - **译序:**本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待。 前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持,但是由于某些原因IE并不支持它。 那么要想在IE中实现圆角,你不得不使用一些技巧,比如使用带有背景图片的CSS类(看一下这篇文章)。 而我知道的在各个浏览器中实现圆角的较简单快速的方案是结合CSS3和JavaScript。CurvyCorners是一个为HTML元素创建漂亮的圆角的免费JavaScript库。效果如下:

css3

CSS3之旅: border-radius(圆角)

Border-radius 允许你使用CSS创建圆角而不需要使用图片或者是JavaScript。如果你还没有使用这个的话,请看看这个教程。 对文档不感兴趣?直接看一下演示吧。 圆角 从历史上来说,圆角通过背景图片和JavaScript实现起来相当棘手 。交互设计师会经常感到无奈,网页设计师也会为此倍感纠结。这种问题将不再存在! 全部圆角 现在你可以很容易的使用CSS3来创建圆角。目前不同的浏览器之间还存在一些差异,但是我相信最终这个句法会标准化的。要添加圆角,你只需要这样: /* Gecko browsers */ -moz-border-radius: 5px; /* Webkit browsers */ -webkit-border-radius: 5px; /* W3C syntax - likely to be standard so use for future proofing */ border-radius:10px; 这就是所有需要做的。Firefox之前在渲染圆角的时候确实有些问题,不过它现在已经修复了,所以你尽可以放心使用。 更多控制 你也可以控制某一个单独的角,将其应用为圆角。这次不同的浏览器之间的代码仍然有些许不同,所以你仍然需要分别列出。 /* Gecko

css

CSS3系列教程:边框半径和圆角

页面中圆角的实现是个很头疼的问题,虽然现在有很多种实现方法,但是都是比较麻烦的。在本文中,让我们看看如何使用CSS3 border-radius来实现圆角DIV。 跨浏览器兼容性 就像在上一篇《CSS3系列教程:简介》中提到的,并不是所有的浏览器支持CSS3,但是那些比较好的浏览器选择兼容,而不是直接支持。我们有两个能使用的前缀。 前缀: -moz(例如 -moz-border-radius)用于Firefox -webkit(例如:-webkit-border-radius)用于Safari和Chrome。 CSS3圆角(所有的) 不使用图片来实现圆角曾经是很流行的能力,创建那些完美的小圆角图片,用做适当的CSS背景,是非常费时的工作。现在,使用CSS3,我们可以用几行代码来创建圆角。 这是一个5px普通边框和15px边框半径的设置: #roundCorderC{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; padding: 15px 25px;