52

これを介してcssに柔軟性を追加できるかどうかを知りたいです：

<div class='round5'></div>

ここで、.roundは角が丸いクラスで、「5」は半径の量を決定します。出来ますか？どこかで見たことがありますが、実装がどのように行われるかはわかりません。

4

8 に答える 8

14

すべて 1 つのプロパティであるため、境界線の半径をその値とは別に定義することはできません。角をどの程度丸めるかを指定せずに、「一般的に」角を丸くするように要素に指示する方法はありません。

ただし、複数のクラスと異なるプロパティを使用して、似たようなことを行うことができます。

HTML:

<div class="rounded blue"></div>
<div class="rounded green"></div>

CSS:

.rounded {
    border-radius: 5px;
}
.blue {
    background: blue;
}
.green {
    background: green;
}

.roundedクラスは境界線の半径を追加し、クラス.blueと.greenクラスは背景色を追加します。

(私は、 などのように、論理的に読めるようにクラスに名前を付けて順序付けするのが好き<div class="large box"></div>です)。

于 2013-07-27T03:11:04.520 に答える
12

これは、少量の jQuery と Regex の小さな知識を必要とする、私が思いついた答えです。

    $(function() {
      var number = $("div").attr("class").match(/\d+$/);
      $("div").css({
        "width": "100px",
        "height": "100px",
        "background-color": "green",
        "border-radius": number + "px"
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='round54'>hello</div>

.match()関数は正規表現を使用します。正規表現は、文字列の一部を検出するために使用されます。は任意の\d数字を検出します。は+、前のセレクターに 1 回以上一致します。つまり、数は複数桁の数にすることができます。そして、$それが最後になければならないことを意味します。

そのため、jQuery はborder-radius後でそれをプロパティで使用します。あなたがしなければならないのは append だけpxで、準備完了です。

フィドル

于 2013-07-27T04:04:25.433 に答える
5

あなたは似たようなことをすることができますが、あなたが言った通りではありません.

CSS

.radius{
    border-radius: 10px;
    border: 1px solid red;
}

.r5{
    border-radius:5px;
}

HTML

<div class="radius">Hello World</div>
<br/>
<div class="radius r5">Hello World</div>

実施例

上記の例では、赤い境界線は保持されますが、境界線の半径は変更されます。

r5クラス名を数字で始めないことに注意してください。5

于 2013-07-27T03:14:33.833 に答える
5

要素でマルチクラス化を使用できます。例えば。：

HTML:

<div class="round">Box without border radius</div>
<div class="round rounded-5">Box with 5px border radius</div>
<div class="round rounded-10">Box with 10px border radius</div>

CSS:

.round {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
}

.round.rounded-5 {
    border-radius: 5px;
}

.round.rounded-10 {
    border-radius: 10px;
}
于 2013-07-27T03:17:44.800 に答える
4

あなたはこれを行うことができます。ただし、htmlドキュメントにcssを作成する必要があります(リンクされていませんが、<style>タグ間)。php または javascript を使用してループを作成できます。たとえば、これを試してください：

<style>
    <?php
    $round = 5;
    for ($round = 50; $round <= 150; $round+=25){

   echo "#round$round{
       height: 300px;
       width: 300px;
       background: #f00;

border-radius : ".$round."px;
    margin: 2px;
}
";

    }
    ?>
</style>
<?php 
for ($round=50;$round<=150; $round+=25){

    echo "<div id='round$round'>

</div>
            ";

}

?>

お役に立てれば！:D

于 2013-07-27T03:35:28.090 に答える
1

あなたが言っていることはできますが、この目的のためだけにキーワード「ラウンド」を予約する必要があります. 以下を見ると。

div[class*="round"] {
    background-color: green;
    color: white;
    padding: 10px;
}

そして、それを使用して特定の亜種をターゲットにします...

div[class="round5"] {
    border-radius: 5px;
}

コードの最初のブロックは、round という単語を含むすべてのクラス名を選択します。これは良いことでも悪いことでもあります。

于 2014-08-04T20:47:15.990 に答える