点评:作为一个前端WEB开发者对于CSS属性的熟悉是避免不了的,而且还要必备的很多,下面本文整理了作为开发者的你必知的9 个CSS 属性,非常实用所以有需求的你可以参考下哈,希望对大家有所帮助1. 圆角效果
复制代码代码如下:border-radius: 10px; /* CSS3 Property */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Chrome/Safari */ -khtml-border-radius: 10px; /* Linux browsers */
复制代码代码如下:#myDiv{ -moz-box-shadow: 20px 10px 7px #ccc; -webkit-box-shadow: 20px 10px 7px #ccc; box-shadow: 20px 10px 7px #ccc; }
复制代码代码如下:object.style.boxShadow=”20px 10px 7px #ccc”
复制代码代码如下:@media screen and (max-width: 480px){ /* 网页在宽度为480px屏幕上的显示样式 */ }
复制代码代码如下:@media print { p.content { color: #ccc } }
复制代码代码如下:background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));
复制代码代码如下:div {background:url(bg.jpg); background-size:800px 600px; background-repeat:no-repeat; }
复制代码代码如下:@font-face { font-family: mySmashingFont; src: url(‘blitz.ttf’) ,url(‘blitz.eot’); /* IE9 */ }
复制代码代码如下:div { font-family:mySmashingFont; }
复制代码代码如下:.clearfix { display: inline-block; }
复制代码代码如下:.clearfix:after { content: “.”; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
复制代码代码如下:.myDiv { margin: 0 auto; width:600px; }
复制代码代码如下:div { overflow:hidden; }