タグ付けされた質問 「rounded-corners」

2つの垂直線の端点で形成される90度の角度を置き換えるユーザーインターフェイス設計機能の名前。

23
CSS3のborder-radiusプロパティとborder-collapse：collapseは混合しません。border-radiusを使用して、角が丸い折りたたみテーブルを作成するにはどうすればよいですか？
編集-元のタイトル：（折りたたみ、丸みを帯びたコーナーテーブルを作成するためborder-collapse:collapseにCSS）を達成する別の方法はありますか？ テーブルの境界線を折りたたむだけでは根本的な問題は解決されないことが判明したので、議論をより反映するようにタイトルを更新しました。 CSS3 border-radiusプロパティを使用して、角が丸いテーブルを作成しようとしています。私が使用しているテーブルスタイルは次のようになります。 table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } ここに問題があります。border-collapse:collapseプロパティも設定したいのですが、設定するとborder-radius機能しなくなります。border-collapse:collapse実際に使用しなくても同じ効果を得ることができるCSSベースの方法はありますか？ 編集： ここで問題を説明する簡単なページを作成しました（Firefox / Safariのみ）。 問題の大部分は、コーナーを丸くするようにテーブルを設定しても、コーナーtd要素のコーナーに影響しないことです。テーブルがすべて1色の場合はtd、最初の行と最後の行でそれぞれ上隅と下隅を丸めることができるので、これは問題にはなりません。ただし、見出しとストライプを区別するためにテーブルの背景色を変えているので、内側のtd要素にも丸い角が表示されます。 提案されたソリューションの概要： 丸い角を持つ別の要素でテーブルを囲むと、テーブルの四角い角が「にじむ」ため、機能しません。 ボーダーの幅を0に指定しても、テーブルは折りたたまれません。 ボトムtdゼロにCELLSPACINGを設定した後、まだ直角の角。 代わりにJavaScriptを使用すると、問題を回避できます。 可能な解決策： テーブルはPHPで生成されるので、外側のth / tdsのそれぞれに異なるクラスを適用し、各コーナーを個別にスタイル設定できます。あまりエレガントではなく、複数のテーブルに適用するのが少し面倒なので、私はこれをしたくないので、提案を続けてください。 考えられる解決策2は、JavaScript（具体的にはjQuery）を使用してコーナーのスタイルを設定することです。この解決策も機能しますが、私が探しているものはまだ十分ではありません（私はうるさいです）。2つの予約があります。 これは非常に軽量なサイトです。JavaScriptを最小限に抑えたいと思います border-radiusを使用することの私にとっての魅力の一部は、優雅な低下と漸進的な強化です。丸みを帯びたすべての角にborder-radiusを使用することで、CSS3対応のブラウザーでは常に丸みを帯びたサイトになり、他のブラウザーでは一貫して正方形のサイトになりたいと思っています（私はIEを見てます）。 今日、CSS3でこれを実行する必要がないように思えるかもしれませんが、私には理由があります。また、この問題はw3c仕様の結果であり、CSS3のサポートが不十分ではないため、CSS3がより広範囲にサポートされている場合でも、どのソリューションも関連性があり有用です。
21
CSSを使用して丸みを帯びたコーナーを作成する[終了]
現在のところ、この質問はQ＆A形式には適していません。私たちは回答が事実、参考文献、または専門知識によってサポートされることを期待しますが、この質問はおそらく議論、議論、投票、または拡張された議論を誘います。この質問を改善でき、再開できると思われる場合は、ヘルプセンターにアクセスしてください。 7年前休業。 CSSを使用して角を丸くするにはどうすればよいですか？
15
ボタンの角を丸める方法
長方形の画像（jpg）があり、それを使用してボタンの背景をxcodeの角を丸くしたいと思います。 私は以下を書きました： UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain]; CGRect frame = CGRectMake(x, y, cardWidth, cardHeight); button.frame = frame; [button setBackgroundImage:backImage forState:UIControlStateNormal]; ただし、この方法で取得したボタンの角は丸くありません。代わりに、元の画像とまったく同じように見えるプレーンな長方形です。代わりに、ボタンを表すために角が丸い画像を取得するにはどうすればよいですか？ ありがとう！
7
Android-上部のみが丸い角のドローアブル
私はこのドローアブルを背景として丸い長方形にするために持っていました： <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@color/white" /> <stroke android:width="1dp" android:color="@color/light_gray" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> <corners android:radius="6dp" /> </shape> 予想通り、これは正常に機能しています。 これを上端のみを丸めるように変更したいので、次のように変更します。 <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@color/white" /> <stroke android:width="1dp" android:color="@color/light_gray" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> <corners android:topLeftRadius="6dp" android:topRightRadius="6dp" android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/> </shape> しかし、今度は角が丸くならず、単純な長方形になります。ここで何が欠けていますか？
13
CSS3の角を丸くしてChrome / Operaのオーバーフローを隠す方法
子供からコンテンツをマスクするために、親divの角を丸くする必要があります。overflow: hidden単純な状況で機能しますが、親が比較的または絶対的に配置されている場合、WebkitベースのブラウザーとOperaで機能しなくなります。 これはFirefoxとIE9で機能します。 CSS #wrapper { width: 300px; height: 300px; border-radius: 100px; overflow: hidden; position: absolute; } #box { width: 300px; height: 300px; background-color: #cde; } HTML <div id="wrapper"> <div id="box"></div> </div> JSFiddleの例 助けてくれてありがとう！ 更新：この問題の原因となったバグは、Chromeで修正されました。ただし、OperaやSafariの再テストは行っていません。
11
UIImageViewでのコーナー半径の設定が機能しない
私は少し途方に暮れています。アプリの複数の要素の角を丸めるために、UIViewのレイヤープロパティを使用しました。ただし、この1つのUIImageViewは単に準拠していません。何が欠けているかわからない。 UIImageView（previewImageと呼ばれます）は、テーブルビューセルに含まれています。（セル自体とセルを作成するコントローラー内の）cornerRadiusプロパティの複数の場所を無効に設定してみました。 static NSString *CellIdentifier = @"MyTableViewCell"; MyTableViewCell *cell = (MyTableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:CellIdentifier owner:self options:nil]; cell = [topLevelObjects objectAtIndex:0]; cell.previewImage.layer.cornerRadius = 20; //Made it 20 to make sure it's obvious. } セルがロードされる方法について何か不足していますか？
5
WPF Rounded Cornerコンテナーを作成するにはどうすればよいですか？
単一のページのさまざまな場所に角を丸くする必要があるXBAPアプリケーションを作成しています。WPFの丸みを帯びたコーナーコンテナーに他の要素の束を配置したいと考えています。私たちがこれを最もうまく達成する方法について誰かが提案やサンプルコードを持っていますか？のスタイルまたはカスタムコントロールの作成のどちらか？
8
プログラムで角を丸めてランダムな背景色を設定する方法
ビューの角を丸くし、実行時にコンテンツに基づいてビューの色を変更したいのですが。 TextView v = new TextView(context); v.setText(tagsList.get(i)); if(i%2 == 0){ v.setBackgroundColor(Color.RED); }else{ v.setBackgroundColor(Color.BLUE); } v.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT)); v.setPadding(twoDP, twoDP, twoDP, twoDP); v.setBackgroundResource(R.drawable.tags_rounded_corners); ドローアブルを設定して色が重なることを望んでいましたが、重複しません。私が2番目に実行するものは、結果として得られる背景です。 実行時まで背景色が決定されないことを念頭に置いて、このビューをプログラムで作成する方法はありますか？ 編集：私はテストのために赤と青の間で交換しているだけです。後でユーザーが色を選択できるようになります。 編集： tags_rounded_corners.xml： <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:bottomRightRadius="2dp" android:bottomLeftRadius="2dp" android:topLeftRadius="2dp" android:topRightRadius="2dp"/> </shape>
17
丸みを帯びたテーブルコーナーCSSのみ
検索して検索しましたが、要件の解決策を見つけることができませんでした。 私は単純な古いHTMLテーブルを持っています。画像やJSを使用せずに、つまり純粋なCSSのみを使用して、角を丸くしたいのです。このような： コーナーセルの場合は丸みを帯びたコーナー、セルの場合は1px太い境界線。 これまでのところ私はこれを持っています： table { -moz-border-radius: 5px !important; border-collapse: collapse !important; border: none !important; } table th, table td { border: none !important } table th:first-child { -moz-border-radius: 5px 0 0 0 !important; } table th:last-child { -moz-border-radius: 0 5px 0 0 !important; } table tr:last-child td:first-child { -moz-border-radius: …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.