Rumah > hujung hadapan web > html tutorial > CSS3_实现圆角效果box-shadow_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 11:40:40
asal
1386 orang telah melayarinya

1.outline的直角与圆角

来给个div:

<div class="use-outline"></div>
Salin selepas log masuk

来再给个样式:

 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         }                    
Salin selepas log masuk

看一下效果图:

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

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         }
Salin selepas log masuk

看一下效果图:

]

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan