Maison> interface Web> tutoriel HTML> le corps du texte

CSS3_实现圆角效果box-shadow_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:40:40
original
1170 Les gens l'ont consulté

1.outline的直角与圆角

来给个div:

Copier après la connexion

来再给个样式:

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 }
Copier après la connexion

看一下效果图:

-moz-outline-radius: 30px;属性使得绿色的 outline 成圆角。但是这个属性只能在FireFox浏览器中使用。切 !!!!这还怎么玩。。所以不用它了接下来换一个,box-shadow(盒阴影)
Copier après la connexion

1.outline的直角与圆角

给个样式:

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 }
Copier après la connexion

看一下效果图:

]

box-shadow: h-shadow v-shadow blur spread color inset;
Copier après la connexion
box-shadow中的6个参数分别为:  h-shadow:水平阴影的位置,可为负值;  v-shadow:垂直阴影的位置,可为负值;  blur:可选。模糊距;  spread:可选。阴影的尺寸;  color:可选。阴影的颜色;  inset:可选。将外部阴影 (outset) 改为内部阴影;
Copier après la connexion

        
Copier après la connexion

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!