圆角 [英] Round angles

查看:78
本文介绍了圆角的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

大家好,

我想知道什么是最好的CSS crossbrowser意味着围绕< DIV>的

角度。没有图像。

提前问候并非常感谢

钢铁

解决方案

钢铁写道:

我想知道什么是最好的CSS crossbrowser意味着围绕< DIV>的角度。没有图像。




没有CSS方法可以在不使用图像的情况下围绕元素的角落。

CSS 3可能包括border-radius属性,我认为已经在浏览器中对它进行了一些支持。

http://www.w3.org/TR/2005/WD-css3-ba .. 。-border-radius


-

David Dorward< http://blog.dorward.me.uk/> < http://dorward.me.uk/>

Home是〜/ .bashrc


" Steel" < ST ************** @ notnotsteeel.net>写道:

我想知道什么是最好的CSS crossbrowser意味着围绕< DIV>的角度。没有图像。




假设你的意思是圆形边框,没有这样的方法。

所需的CSS是CSS3提案的一部分,afaik没有浏览器支持

。最近基于Gecko的浏览器具有专有的-moz-属性

来创建圆形边框。


使用这些专有属性,Gecko渲染非抗锯齿轮

边界,非常难看。在实现它时,可以从其他

浏览器中获得相同的丑陋渲染,因此在可预见的未来,使用现有的基于图像的方法之一可以更好地使用




-

Spartanicus


Steel写道:

你好总而言之,我想知道什么是最好的CSS crossbrowser意味着围绕< DIV>的角度。没有图片。
提前问候并非常感谢
Steel




如果你想尝试CSS3,那试试这个:


< style type =" text / css">

a:link.roundedCorners {

margin:0;

填充:0 2px;

border:solid 1px#f33;

-moz-border-radius:50%

}


a:hover.roundedCorners {

background-color:#fcc;

保证金:0;

填充:0 2px;

border:solid 1px#f00;

-moz-border-radius:50%

}

< / style>

< p>这是< a class =" roundedCorners" CSS的href ="#">示例< / a>

圆角。 Firefox / Moz将呈现< a class =&roundedCorners&

href ="#"> Round Borders< / a>最初以及悬停。所有其他

仅在悬停时显示方形边框。< / p>


-

Gus


Hi at all,
I''ld like to know what is the best CSS crossbrowser mean to round the
angles of <DIV> without images.
Regards and thank you very much in advance
Steel

解决方案

Steel wrote:

I''ld like to know what is the best CSS crossbrowser mean to round the
angles of <DIV> without images.



There isn''t a CSS way to round the corners of elements without using images.
CSS 3 is likely to include the border-radius property, I think there is
some support for it among browsers already.

http://www.w3.org/TR/2005/WD-css3-ba...-border-radius

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is


"Steel" <st**************@notnotsteeel.net> wrote:

I''ld like to know what is the best CSS crossbrowser mean to round the
angles of <DIV> without images.



Assuming that you mean rounded borders, there is no such method. The
required CSS is part of the CSS3 proposals, afaik no browser supports
that yet. Recent Gecko based browsers have proprietary -moz- properties
to create rounded borders.

Using those proprietary properties, Gecko renders non anti-aliased round
borders, quite ugly. The same ugly rendering can be expected from other
browsers when they implement it, so you are better off by using one of
the existing image based methods for the foreseeable future.

--
Spartanicus


Steel wrote:

Hi at all,
I''ld like to know what is the best CSS crossbrowser mean to round the
angles of <DIV> without images.
Regards and thank you very much in advance
Steel



If you would like to try CSS3, then try this:

<style type="text/css">
a:link.roundedCorners {
margin: 0;
padding: 0 2px;
border: solid 1px #f33;
-moz-border-radius: 50%
}

a:hover.roundedCorners {
background-color: #fcc;
margin: 0;
padding: 0 2px;
border: solid 1px #f00;
-moz-border-radius: 50%
}
</style>
<p>This is an <a class="roundedCorners" href="#">example</a>, of CSS
rounded corners. Firefox/Moz will present <a class="roundedCorners"
href="#">Round Borders</a> initially as well as on hover. All others
will show a square border only on hover.</p>

--
Gus


这篇关于圆角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆