ホームページ >ウェブフロントエンド >htmlチュートリアル >css3 border-radius_html/css_WEB-ITnose
css3 border-radius_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:43:391087ブラウズ
プレフィックスはブラウザに対応します
| prefix | Browser |
| -webkit | クロームとサファリ |
| -moz | Firefox |
| -ms | IE |
| -o | opera |
border-radius:
<style type="text/css">div.circle{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }div.same{ height:100px; width:50px; background:#9da;}.semi-circle{ border-radius:50px 0 0 50px; }.test{ border-radius: 50% 0 0 50%;} </style><body><div class="circle"></div><br/><div class="same semi-circle "></div><br/><div class="same test"></div></body> 可視設定 50% 50pxのような固定値を設定するのとまだ違いがあります。何パーセントを基準にするか勉強していないので、パーセントで左半円を設定する方法がわかりません。
参考:
https://css-tricks.com/almanac/properties/b/border-radius/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。