ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS3_角丸効果の実現 box-shadow_html/css_WEB-ITnose

CSS3_角丸効果の実現 box-shadow_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:40:40
オリジナル
1298 人が閲覧しました

1.アウトラインの直角と丸い角

div を与えてみましょう:

<div class="use-outline"></div>
ログイン後にコピー

別のスタイルを与えてみましょう:

 1 .use-outline{ 2             3             width: 200px; 4             height: 200px; 5             background: #009dda; 6             margin: 100px 40px; 7             border-radius: 10px; 8             border: 10px solid #c24263; 9 10 11             outline: 20px solid #26C2A7;12             -moz-outline-radius: 30px;13 14         }                    
ログイン後にコピー

レンダリングを見てみましょう:

-moz-outline-radius: 30px;属性使得绿色的 outline  成圆角。但是这个属性只能在FireFox浏览器中使用。切 !!!!这还怎么玩。。所以不用它了接下来换一个,box-shadow(盒阴影)
ログイン後にコピー

1.アウトラインと直角角丸

スタイルを教えてください:

 1 .use-outline{ 2             width: 200px; 3             height: 200px; 4             background: #009dda; 5             margin: 100px 40px; 6             border: 10px solid #c24263; 7             border-radius: 10px; 8  9             box-shadow:0px 0px 0px 25px #c032cc;10         }
ログイン後にコピー

レンダリングを見てください:

]

box-shadow: h-shadow   v-shadow   blur   spread   color   inset;
ログイン後にコピー
box-shadow中的6个参数分别为:  h-shadow:水平阴影的位置,可为负值;  v-shadow:垂直阴影的位置,可为负值;  blur:可选。模糊距;  spread:可选。阴影的尺寸;  color:可选。阴影的颜色;   inset:可选。将外部阴影 (outset) 改为内部阴影;
ログイン後にコピー
 
ログイン後にコピー

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート