CSS: How to add rounded corner with border and no

2019-06-10 20:49发布

Is there something like this that can work with IE? No images and with borders?

http://www.css3.info/preview/rounded-border/

4条回答
Luminary・发光体
2楼-- · 2019-06-10 21:06

With CSS3 you can achieve this without using any images.

But isn't supported in many browsers.

Emotional °昔
3楼-- · 2019-06-10 21:11

Try this one:

http://www.cssplay.co.uk/boxes/curves.html

This method uses no images, no javascript, but a little bit of extra HTML with CSS.

Basicly, this method is based on the use bullets (•). Bullets are given the desired color and placed in the four corners of the box. The box is relatively positioned, the bullets are positioned absolutely. That is they are positioned absolutely relative to the parent box.

查看更多
相关推荐>>
4楼-- · 2019-06-10 21:17

I haven't tried but you can have a look on this

Nifty Corners Cube: rounded corners without images - 
URL is http://www.html.it/articoli/niftycube/index.html

OR you can try

JQuery Corners - 
http://www.atblabs.com/jquery.corners.html

Example usage -

<div style="background-color:#acc; padding:10px" class="rounded">
  Example with different x and y sizes.
</div>
<script>$(document).ready( function(){
  $('.rounded').corners("30px 10px");
});</script>

Works with:

    * iPhone
    * Chrome
    * Firefox
    * Safari 2+
    * Opera 9.0+
    * Internet Explorer 6+
    * and probably more...
查看更多
何必那么认真
5楼-- · 2019-06-10 21:22

Try Nifty Corners Cube, but it doesn't allow you to have a border color different form the inner background color. You will need to find a workaround (nifty corner inside a nifty corner). You can also checkout jQueryUI's themeroller. It uses images but you can use it to design your own theme and all you have to do is download the whole package containing the scripts, styles and images. Check out the part where you can create Highlight / Error.

Here's a sample of the nifty corners cube inside another nifty corner. Just view the source. Nifty Corners Cube sample

登录 后发表回答