Как сделать круглую угловую коробку внутри тега DIV с помощью jquery? - PullRequest
Новая
       3

Как сделать круглую угловую коробку внутри тега DIV с помощью jquery?

2 голосов
/ 12 января 2012

Я хочу сделать прямоугольник внутри тега div. Как я могу это сделать? Можете привести пример?

Ответы [ 5 ]

7 голосов
/ 12 января 2012

Вы можете использовать CSS: 

.rounded-corners {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

Затем добавьте класс ".iled-corners" в ваш div, используя jQuery: 

$("#div-id").addClass("rounded-corners");
5 голосов
/ 12 января 2012

Используйте border-radius: 10px с CSS.

Также взгляните на этот пост: https://stackoverflow.com/questions/521432/best-jquery-rounded-corners-script

2 голосов
/ 12 января 2012

Я полагаю, вы ищете border-radius свойство CSS .JavaScript не имеет ничего общего с тем, как элементы выглядят, просто как они действуют. 

<div style="border-radius:10px;height:100px;width:100px;"></div>
1 голос
/ 28 мая 2015

Вы можете использовать JQuery.Corner.Js для создания угла в теге div.

На первом шаге добавьте jquery.corner.js на свою страницу после 'jquery.js' 

<script src="../JQuery/external/jquery/jquery.js"></script>
<script src="jquery.corner.js"></script>

<script>
    $(document).ready(function () {

        $("#Div1").corner();
        $("#Div2").corner("long");
    });     
</script>


<body>

    <div id="Div1" style="background-color: blue; 
        width: 150px; height: 150px;">
    </div>
    <br />
    <div id="Div2" style="background-color: blue; 
        width: 150px; height: 150px;">
    </div>
    <br />
</body>

Вы можете найти больше образцов по этому адресу JQuery Corner Demo

1 голос
/ 12 января 2012

Вот безопасный способ для нескольких браузеров: 

.box {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px; 
}
...