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

WBOY
Freigeben: 2016-06-24 11:40:40
Original
1177 Leute haben es durchsucht

1.outline的直角与圆角

来给个div:

Nach dem Login kopieren

来再给个样式:

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 }
Nach dem Login kopieren

看一下效果图:

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

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 }
Nach dem Login kopieren

看一下效果图:

]

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

        
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!