круглый плагин jquery + границы - PullRequest
Новая
       5

круглый плагин jquery + границы

0 голосов
/ 16 июня 2011

Интересно, как я могу получить div с закругленными углами в IE с границами?

Согласно плагину jquery jquery.corner.js эту работу было бы очень просто выполнить! Но я не могу сделать div с закругленными углами "с границей", работающий в Internet Explorer, больше чем 5 ...

Следующий код предназначен только для тестирования. 

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>somepage</title>

<script type="text/javascript" src="classes/jquery.js"></script>
<script type="text/javascript" src="classes/jquery.corner.js"></script>

<script type="text/javascript">
    $("#teste").corner("round 8px").parent().css('padding', '3px').corner("round 10px");
</script>

<style type="text/css">
.demo{
    height: 34px;
    width: 450px;
    background: blue;
}

</style>

</head>
<body bgcolor="green">

<div id="teste" class="demo">
</div>

</body>
</html>

Что я делаю не так? Большое спасибо, как всегда.

Ответы [ 2 ]

3 голосов
/ 16 июня 2011

Вы уже пробовали CSS3PIE еще?

1 голос
/ 16 июня 2011

Я бы порекомендовал вам использовать CSS-способ.

Вы идете сюда и выбираете цвета для своего угла. http://www.spiffycorners.com/

После этого вы получите CSS, который вам нужно поставить, и пример кода, как его использовать. Это должно работать очень хорошо во всех браузерах. Я использовал это. Изображения не требуются.

Это образцы стилей: 

<style type="text/css">
.spiffy{display:block}
.spiffy *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#b20000}
.spiffy1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #870000;
  border-right:1px solid #870000;
  background:#9f0000}
.spiffy2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #6f0000;
  border-right:1px solid #6f0000;
  background:#a30000}
.spiffy3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #a30000;
  border-right:1px solid #a30000;}
.spiffy4{
  border-left:1px solid #870000;
  border-right:1px solid #870000}
.spiffy5{
  border-left:1px solid #9f0000;
  border-right:1px solid #9f0000}
.spiffyfg{
  background:#b20000}
</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>

Счастливый стиль !!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...