ホームページ >ウェブフロントエンド >htmlチュートリアル >Div+Css 角丸長方形 - Internet-organized_html/css_WEB-ITnose からの抜粋

Div+Css 角丸長方形 - Internet-organized_html/css_WEB-ITnose からの抜粋

WBOY
WBOYオリジナル
2016-06-24 12:31:06959ブラウズ





Div+Css圆角四角形


.roundcorner h1、.roundcorner h2、.roundcorner p {margin:0 10px;文字間隔:1px;}
.content_roundcorner h1, .content_roundcorner h2, .content_roundcorner p {margin:0 10px;文字間隔:1px;}
.content_roundcorner h1 {font-size:2.5em; color:#fff;}
.content_roundcorner h2 {font-size:2em;color:#06a; border:0;}
.content_roundcorner p {padding-bottom:0.5em;}
.content_roundcorner h2 {padding-top:0.5em;}

.top_roundcorner、.bottom_roundcorner {display:block;}
.border_rc1、.border_rc2、.border_rc3、.border_rc4 {display:block;overflow:hidden;}
.border_rc1、.border_rc2、.border_rc3 {height:1px;}
.border_rc2、.border_rc3、.border_rc4 {border-left:1px ソリッド #08c; border-right:1px ソリッド #08c;}
.border_rc1 {margin:0 5px;背景:#08c;}
.border_rc2 {マージン:0 3px; border-width:0 2px;}
.border_rc3 {margin:0 2px;}
.border_rc4 {height:2px; margin:0 1px;}
.roundcorner{}
.content_roundcorner {display:block;ボーダー:0 ソリッド #08c; border-width:0 1px;}
.content_roundcorner,.border_rc2, .border_rc3, .border_rc4{background:#ccc;}