css高级

 

几个高级的css 选择符

 

 

h1 + p{}  这个是兄弟的意思

#div>p{}   这个是严格的父子关系的意思

a[target='_blank']{}    这里的target是属性，同样也可以用如input[type='submit']{}

a[href$='.zip']{}     这里是正则表达式，以什么什么开头

a[href^='mailto:']{} 以什么什么结尾

a[href*='cnblog']{}  包含什么什么

 

CSS3的圆角

之前没用css3之前，我想做圆角的时候都是很蛋疼的，首先我不会p图，不会做那个圆角的图案，因此总是叫美工人员给我p图，然后呢。可能还要考虑什么宽度自适应。总之就是很麻烦，但是用css3就ok了。但是呢，在ie8-下是没效果的。

 

假设有一个div，id为my_div。

四个角都是圆角：

#my_div{ -moz-border-radius: 5px; } 这里的5px其实是半径的意思。

#my_div { -moz-border-radius:10px 20px 30px 40px; }这里依次是左上、右上、右下、左下

#my_div { -moz-border-radius-topright: 30px; }此外还有bottomright topleft bottomleft。

 

Safari和Chrome的hack

 

#my_div { -webkit-border-radius: 10px 20px 30px 40px;

#box {

   -webkit-border-top-left-radius: 10px ;

  -webkit-border-top-right-radius: 20px; 

  -webkit-border-bottom-right-radius: 30px;

  -webkit-border-bottom-left-radius: 40px;

}

 

TextShadow

用一个小小的css

span.shadow{text-shadow:1px 1px #FFFFFF;}就可以实现